/* =========================================================
   SCOPIONE — Testimonials Page Styles
   Page: /testimonials/  (Page ID 66)
   Template: page-testimonials.php

   Extracted from scopione-child.css — all testimonials-scoped
   styles live here so they can be edited without affecting
   other sections/pages.
   ========================================================= */


/* ---------------------------------------------------------
   1) Card-columns masonry override (Bootstrap 4)
   .card-columns is only used on the testimonials template.
   --------------------------------------------------------- */
@media (min-width: 576px) {
	body.page-id-66 .card-columns {
		column-count: 2;
	}
}
@media (min-width: 992px) {
	body.page-id-66 .card-columns {
		column-count: 3;
		column-gap: 1.5rem;         /* E9: widen from Bootstrap default 1.25rem */
	}
}


/* ---------------------------------------------------------
   2) Legacy pagination (nav.test-pagination)
   Used by paginate_links() in the testimonials template.
   Styled to match WooCommerce pagination pills in scopione-child.css.
   --------------------------------------------------------- */
body.page-id-66 nav.test-pagination {
    text-align: center;
}
body.page-id-66 nav.test-pagination ul {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    border: 0;                        /* was 1px solid #d3ced2 — caused the lines */
    list-style: none;
}
body.page-id-66 nav.test-pagination ul li {
    border: 0;                        /* was border-right: 1px solid #d3ced2 */
    padding: 0;
    margin: 0;
    float: none;                      /* was float: left — now flex child */
    display: block;
    overflow: hidden;
}
body.page-id-66 nav.test-pagination ul li a,
body.page-id-66 nav.test-pagination ul li span{
  margin: 0;
  text-decoration: none;
  padding: 0 12px;
  line-height: 1;
  font-size: 16px;                     /* harmonized with Section 5 (was 1em) */
  font-weight: 700;                    /* harmonized with Section 5 (was 800) */
  min-width: 44px;                     /* WCAG 2.5.8 touch target (was 42px) */
  height: 44px;                        /* WCAG 2.5.8 touch target (was 42px) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  color: var(--sc-dark, #111);
  transition: background .18s ease, color .18s ease, transform .18s ease;
  box-shadow: none;
}
body.page-id-66 nav.test-pagination ul li span.current {
    background: var(--sc-yellow, #ffbe3d);
    border-color: var(--sc-yellow, #ffbe3d);
    color: var(--sc-dark, #111);
    /* box-shadow governed by Section 5 via !important */
}
body.page-id-66 nav.test-pagination ul li span {
    transition: none;
}
body.page-id-66 nav.test-pagination ul li a:focus-visible,
body.page-id-66 nav.test-pagination ul li a:hover {
    background: var(--sc-dark, #111);
    color: #fff;
    border-color: var(--sc-dark, #111);
    transform: translateY(-1px);
}
body.page-id-66 nav.test-pagination ul li a:focus-visible {
    outline: 2px solid var(--sc-yellow, #ffbe3d);
    outline-offset: 2px;
    border-radius: 12px;
}


/* ---------------------------------------------------------
   3) Testimonials gallery (2-up grid)
   --------------------------------------------------------- */
body.page-id-66 .testimonial-gallery,
body:has(.testimonial-gallery) .testimonial-gallery{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

body.page-id-66 .testimonial-gallery .testimonial-item,
body:has(.testimonial-gallery) .testimonial-gallery .testimonial-item{
  position: relative;                /* enables z-index stacking */
  flex: 1 0 calc(50% - .5rem);
  max-width: calc(50% - .5rem);
  box-sizing: border-box;
  display: block;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  transform-origin: center;
  backface-visibility: hidden;       /* prevents sub-pixel blur on fractional scale */
  overflow: hidden;
  border-radius: .5rem;
}

body.page-id-66 .testimonial-gallery .testimonial-thumb,
body:has(.testimonial-gallery) .testimonial-gallery .testimonial-thumb{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;              /* normalize mixed-size images into uniform tiles */
  object-fit: cover;                 /* crop to fill — no letterboxing */
}

/* Mobile: stack to 1-up */
@media (max-width: 575.98px){
  body.page-id-66 .testimonial-gallery .testimonial-item,
  body:has(.testimonial-gallery) .testimonial-gallery .testimonial-item{
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Clean thumbnail edges */
body.page-id-66 .testimonial-gallery .img-thumbnail,
body:has(.testimonial-gallery) .testimonial-gallery .img-thumbnail{
  padding: 0;
  border: none;
  border-radius: .5rem;
}

/* Hover (scoped so it never affects other .testimonial-item elsewhere) */
@media (hover: hover){
  body.page-id-66 .testimonial-gallery .testimonial-item:hover,
  body:has(.testimonial-gallery) .testimonial-gallery .testimonial-item:hover{
    will-change: transform;
    transform: scale(1.02);
    z-index: 2;
  }
}

/* Focus ring for gallery images (keyboard accessibility) */
body.page-id-66 .testimonial-gallery .testimonial-item:focus-visible,
body:has(.testimonial-gallery) .testimonial-gallery .testimonial-item:focus-visible{
  outline: 2px solid var(--sc-yellow, #ffbe3d);
  outline-offset: 2px;
  z-index: 2;
}


/* ---------------------------------------------------------
   4) In-content link styling (content only)
      - avoids header/footer/nav
      - avoids buttons
      - avoids gallery tiles

   NOTE: Duplicated with body.page-id-66 fallback below
   for browsers that do not support :has() (Firefox <121,
   Samsung Internet <23, older WebViews).
   --------------------------------------------------------- */
/* :has() version (modern browsers) */
body:has(.testimonial-gallery) main :where(.entry-content, .wp-block-post-content) a:not(.button):not(.wp-block-button__link):not(.testimonial-item){
  color: var(--sc-dark, #111) !important;
  text-decoration: none !important;

  /* "Scopione underline" */
  border-bottom: 1px solid rgba(255,190,61,.65);
  box-shadow: inset 0 -0.22em 0 rgba(255,190,61,.18);
  transition: box-shadow .18s ease, border-color .18s ease, color .18s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;        /* underline renders on every wrapped line */
}

body:has(.testimonial-gallery) main :where(.entry-content, .wp-block-post-content) a:not(.button):not(.wp-block-button__link):not(.testimonial-item):hover{
  border-bottom-color: var(--sc-yellow, #ffbe3d);
  box-shadow: inset 0 -0.55em 0 rgba(255,190,61,.28);
}

body:has(.testimonial-gallery) main :where(.entry-content, .wp-block-post-content) a:not(.button):not(.wp-block-button__link):not(.testimonial-item):focus-visible{
  outline: 2px solid var(--sc-yellow, #ffbe3d);
  outline-offset: 2px;
  border-bottom-color: transparent;
}

/* Fallback for browsers without :has() */
body.page-id-66 main :where(.entry-content, .wp-block-post-content) a:not(.button):not(.wp-block-button__link):not(.testimonial-item){
  color: var(--sc-dark, #111) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(255,190,61,.65);
  box-shadow: inset 0 -0.22em 0 rgba(255,190,61,.18);
  transition: box-shadow .18s ease, border-color .18s ease, color .18s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
body.page-id-66 main :where(.entry-content, .wp-block-post-content) a:not(.button):not(.wp-block-button__link):not(.testimonial-item):hover{
  border-bottom-color: var(--sc-yellow, #ffbe3d);
  box-shadow: inset 0 -0.55em 0 rgba(255,190,61,.28);
}
body.page-id-66 main :where(.entry-content, .wp-block-post-content) a:not(.button):not(.wp-block-button__link):not(.testimonial-item):focus-visible{
  outline: 2px solid var(--sc-yellow, #ffbe3d);
  outline-offset: 2px;
  border-bottom-color: transparent;
}

/* Keep gallery links clean (no underline/highlight) */
body.page-id-66 .testimonial-gallery a,
body:has(.testimonial-gallery) .testimonial-gallery a{
  border-bottom: 0 !important;
  box-shadow: none !important;
}


/* ---------------------------------------------------------
   5) Pagination (modern pill buttons)
   Goals:
   - no thin divider lines left/right of the pager
   - buttons aligned + consistent sizing
   - hover = black (no jump)
   - current = yellow
   --------------------------------------------------------- */

/* 5.1 Remove divider lines on common pagination wrappers */
/* :has() version */
body:has(.testimonial-gallery) :is(nav.navigation.pagination, nav.pagination, .navigation.pagination, .pagination):has(.page-numbers){
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}
/* Fallback: match by page ID + known wrapper classes */
body.page-id-66 :is(nav.navigation.pagination, nav.pagination, .navigation.pagination, .pagination){
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
}
/* Kill borders on ALL navigation wrappers on this page */
body.page-id-66 nav.navigation,
body.page-id-66 nav.navigation.pagination,
body.page-id-66 nav.posts-navigation,
body.page-id-66 nav.post-navigation,
body.page-id-66 .navigation.pagination,
body.page-id-66 nav.pagination{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
/* Kill borders on .nav-links and all its children */
body.page-id-66 nav.navigation .nav-links,
body.page-id-66 .navigation.pagination .nav-links,
body.page-id-66 .nav-links{
  border: 0 !important;
}
/* Catch-all: parent theme may border .site-main nav or article-level wrappers */
body.page-id-66 .site-main > nav,
body.page-id-66 #primary > nav,
body.page-id-66 #content > nav,
body.page-id-66 article > nav,
body.page-id-66 .entry-content > nav,
body.page-id-66 .hentry > nav,
body.page-id-66 .type-page > nav{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

body:has(.testimonial-gallery) :is(nav.navigation.pagination, nav.pagination, .navigation.pagination, .pagination):has(.page-numbers)::before,
body:has(.testimonial-gallery) :is(nav.navigation.pagination, nav.pagination, .navigation.pagination, .pagination):has(.page-numbers)::after,
body:has(.testimonial-gallery) :is(.nav-links, ul.page-numbers):has(.page-numbers)::before,
body:has(.testimonial-gallery) :is(.nav-links, ul.page-numbers):has(.page-numbers)::after{
  content: none !important;
  display: none !important;
}
/* Fallback: pagination wrapper pseudo-elements */
body.page-id-66 :is(nav.navigation.pagination, nav.pagination, .navigation.pagination, .pagination)::before,
body.page-id-66 :is(nav.navigation.pagination, nav.pagination, .navigation.pagination, .pagination)::after,
body.page-id-66 :is(.nav-links, ul.page-numbers)::before,
body.page-id-66 :is(.nav-links, ul.page-numbers)::after{
  content: none !important;
  display: none !important;
}

/* Also remove any separators implemented as borders on children */
body:has(.testimonial-gallery) :is(.nav-links, ul.page-numbers):has(.page-numbers) > *{
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}
body.page-id-66 :is(.nav-links, ul.page-numbers) > *{
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Hide separators only inside / immediately after the pagination wrapper */
body:has(.testimonial-gallery) .test-pagination ~ :is(hr, .wp-block-separator, .separator, .divider){
  display: none;
}
/* Fallback: separator hiding */
body.page-id-66 .test-pagination ~ :is(hr, .wp-block-separator, .separator, .divider){
  display: none;
}

/* 5.2 Layout: center the pager row */
body:has(.testimonial-gallery) :is(nav.navigation.pagination, nav.pagination, .navigation.pagination, .pagination):has(.page-numbers) .nav-links{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
}
body.page-id-66 :is(nav.navigation.pagination, nav.pagination, .navigation.pagination, .pagination) .nav-links{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin: 1.25rem 0 0 !important;
  padding: 0 !important;
}

body:has(.testimonial-gallery) ul.page-numbers{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 1.25rem 0 0 !important;
}
body.page-id-66 ul.page-numbers{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 1.25rem 0 0 !important;
}

body:has(.testimonial-gallery) ul.page-numbers > li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body:has(.testimonial-gallery) ul.page-numbers > li::before,
body:has(.testimonial-gallery) ul.page-numbers > li::after{
  content: none !important;
  display: none !important;
}
body.page-id-66 ul.page-numbers > li{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.page-id-66 ul.page-numbers > li::before,
body.page-id-66 ul.page-numbers > li::after{
  content: none !important;
  display: none !important;
}

/* 5.3 Buttons */
body:has(.testimonial-gallery) :is(a.page-numbers, span.page-numbers, ul.pagination > li > a, ul.pagination > li > span){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 44px !important;
  min-width: 44px !important;
  padding: 0 14px !important;

  line-height: 1 !important;               /* fixes "numbers off" */
  font-size: 16px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;

  border-radius: 12px !important;
  border: 1px solid rgba(17,17,17,.18) !important;
  background: #fff !important;
  color: var(--sc-dark, #111) !important;

  text-decoration: none !important;
  box-sizing: border-box !important;

  /* neutralize theme offsets */
  position: relative !important;
  top: 0 !important;
  transform: none !important;
  vertical-align: middle !important;

  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease !important;
}
/* 5.3 Buttons — page-id fallback */
body.page-id-66 :is(a.page-numbers, span.page-numbers){
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 44px !important;
  min-width: 44px !important;
  padding: 0 14px !important;

  line-height: 1 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;

  border-radius: 12px !important;
  border: 1px solid rgba(17,17,17,.18) !important;
  background: #fff !important;
  color: var(--sc-dark, #111) !important;

  text-decoration: none !important;
  box-sizing: border-box !important;

  position: relative !important;
  top: 0 !important;
  transform: none !important;
  vertical-align: middle !important;

  transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease !important;
}

/* Hover = BLACK (explicitly reset shadow so nothing "left over" persists) */
body:has(.testimonial-gallery) :is(a.page-numbers:hover, ul.pagination > li > a:hover){
  background: var(--sc-dark, #111) !important;
  border-color: var(--sc-dark, #111) !important;
  color: #fff !important;
  box-shadow: none !important;
}
body.page-id-66 a.page-numbers:hover{
  background: var(--sc-dark, #111) !important;
  border-color: var(--sc-dark, #111) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Active press state */
body:has(.testimonial-gallery) a.page-numbers:active{
  transform: scale(.96) !important;
}
body.page-id-66 a.page-numbers:active{
  transform: scale(.96) !important;
}

/* Current page = YELLOW (and stays yellow) */
body:has(.testimonial-gallery) :is(span.page-numbers.current, a.page-numbers.current, .page-numbers.current, ul.pagination > li.active > span, ul.pagination > li.active > a){
  background: var(--sc-yellow, #ffbe3d) !important;
  border-color: var(--sc-yellow, #ffbe3d) !important;
  color: var(--sc-dark, #111) !important;
  box-shadow: none !important;
}
body.page-id-66 span.page-numbers.current{
  background: var(--sc-yellow, #ffbe3d) !important;
  border-color: var(--sc-yellow, #ffbe3d) !important;
  color: var(--sc-dark, #111) !important;
  box-shadow: none !important;
}
body:has(.testimonial-gallery) a.page-numbers.current:hover{
  background: var(--sc-yellow, #ffbe3d) !important;
  border-color: var(--sc-yellow, #ffbe3d) !important;
  color: var(--sc-dark, #111) !important;
}
/* Fallback: keep current page yellow on hover */
body.page-id-66 a.page-numbers.current:hover{
  background: var(--sc-yellow, #ffbe3d) !important;
  border-color: var(--sc-yellow, #ffbe3d) !important;
  color: var(--sc-dark, #111) !important;
}

/* Next/Prev/Older pills */
body:has(.testimonial-gallery) :is(a.page-numbers.next, a.page-numbers.prev, ul.pagination > li.next > a, ul.pagination > li.prev > a){
  min-width: auto !important;
  padding: 0 16px !important;
}
body.page-id-66 :is(a.page-numbers.next, a.page-numbers.prev){
  min-width: auto !important;
  padding: 0 16px !important;
}

/* Dots if they ever appear */
body:has(.testimonial-gallery) :is(span.page-numbers.dots, .page-numbers.dots){
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-width: 18px !important;
  padding: 0 6px !important;
}
body.page-id-66 span.page-numbers.dots{
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  min-width: 18px !important;
  padding: 0 6px !important;
}

/* Prevent visited purple */
body:has(.testimonial-gallery) a.page-numbers:visited{
  color: var(--sc-dark, #111) !important;
}
body.page-id-66 a.page-numbers:visited{
  color: var(--sc-dark, #111) !important;
}

/* Focus ring for accessibility */
body:has(.testimonial-gallery) a.page-numbers:focus-visible{
  outline: 2px solid rgba(255,190,61,.9);
  outline-offset: 2px;
}
body.page-id-66 a.page-numbers:focus-visible{
  outline: 2px solid rgba(255,190,61,.9);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   6) Ekko Lightbox refinements (fix split overlay + darker bg)
   Scoped to page-id-66 to prevent leaking to other pages.
   --------------------------------------------------------- */

/* Darker backdrop ONLY when Ekko Lightbox is open */
body.page-id-66.modal-open .modal-backdrop.show,
body:has(.ekko-lightbox.show) .modal-backdrop.show{
  background:#000 !important;
  opacity:.92 !important;
}
/* Backdrop blur — only on capable devices, skip on mobile for perf */
@supports (backdrop-filter: blur(2px)) {
  @media (min-width: 768px) {
    body.page-id-66.modal-open .modal-backdrop.show,
    body:has(.ekko-lightbox.show) .modal-backdrop.show{
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
    }
  }
}

/* Fallback (if :has() isn't supported) — scoped to page + Ekko sibling combinator */
body.page-id-66.modal-open .ekko-lightbox ~ .modal-backdrop.show{
  background:#000 !important;
  opacity:.92 !important;
}

/* Kill the "split screen / giant pill" nav overlay problem */
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a{
  opacity: 1 !important;
  background: transparent !important;
  cursor: pointer !important;
  padding: 0 14px !important;
  color:#fff !important;
  font-size: 30px !important;
  text-decoration: none !important;
}

/* Stop inner elements from stretching into a huge bar */
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a > *{
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
}

/* Prev left, next right */
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:first-child{
  justify-content: flex-start !important;
}
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:last-child{
  justify-content: flex-end !important;
}

/* Button styling */
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a span,
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a i,
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a svg{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 8px !important;
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.35) !important;
  opacity: .55 !important;
  transform: scale(.98) !important;
  transition: opacity .15s ease, transform .15s ease !important;
}

/* Stronger on hover */
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:hover span,
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:hover i,
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:hover svg{
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Focus ring for lightbox nav (keyboard accessibility) */
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:focus-visible{
  outline: 2px solid rgba(255,190,61,.85);
  outline-offset: -2px;
}
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:focus-visible span,
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:focus-visible i,
body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a:focus-visible svg{
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Tighten the "white frame" feel */
body.page-id-66 .ekko-lightbox .modal-content{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.page-id-66 .ekko-lightbox .modal-body{
  padding: 0 !important;
}
body.page-id-66 .ekko-lightbox .ekko-lightbox-container{
  background: rgba(0,0,0,.35) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.55) !important;
}

/* Lightbox close button — visible on dark backdrop */
body.page-id-66 .ekko-lightbox .modal-header {
  border: 0 !important;
  padding: .5rem !important;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
}
body.page-id-66 .ekko-lightbox .modal-header .close {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
  opacity: .7 !important;
  font-size: 1.5rem;
  transition: opacity .15s ease;
}
body.page-id-66 .ekko-lightbox .modal-header .close:hover {
  opacity: 1 !important;
}
body.page-id-66 .ekko-lightbox .modal-header .close:focus-visible {
  outline: 2px solid rgba(255,190,61,.85);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   7) Reduced motion: disable transforms + transitions
   MERGED: includes rules from the E1-E10 addendum block.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body.page-id-66 .testimonial-gallery .testimonial-item,
  body:has(.testimonial-gallery) .testimonial-gallery .testimonial-item,
  body:has(.testimonial-gallery) main :where(.entry-content, .wp-block-post-content) a,
  body.page-id-66 main :where(.entry-content, .wp-block-post-content) a,
  body:has(.testimonial-gallery) a.page-numbers,
  body.page-id-66 a.page-numbers,
  body.page-id-66 nav.test-pagination ul li a,
  body.page-id-66 nav.test-pagination ul li span,
  body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a span,
  body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a i,
  body.page-id-66 .ekko-lightbox .ekko-lightbox-nav-overlay a svg,
  /* E1-E10 enhancement elements */
  body.page-id-66 .card-columns .card,
  body.page-id-66 .testimonial-gallery .testimonial-item::after,
  body.page-id-66 .card a.hover-arrow,
  body.page-id-66 .card a.hover-arrow::after,
  body.page-id-66 #submit-testimonial h2 span[aria-hidden="true"],
  body.page-id-66 #submit-testimonial .form-control,
  body.page-id-66 #submit-testimonial .form-check-label a,
  body.page-id-66 #submit-testimonial .wpcf7-form-control-wrap[data-name^="file-"],
  body.page-id-66 #submit-testimonial input[type="file"]::file-selector-button,
  /* E11-E16 enhancement elements */
  body.page-id-66 #content > h1::after,
  body.page-id-66 #content > h2:not(.sr-only)::after,
  body.page-id-66 #content > p .hover-arrow,
  body.page-id-66 .shop-header #breadcrumbs a{
    transition: none !important;
    animation: none !important;
  }
  body.page-id-66 .testimonial-gallery .testimonial-item:hover,
  body:has(.testimonial-gallery) .testimonial-gallery .testimonial-item:hover{
    transform: none !important;
  }
  body.page-id-66 .card-columns .card:hover {
    transform: none !important;
  }
  body.page-id-66 #content > h1:hover::after,
  body.page-id-66 #content > h2:not(.sr-only):hover::after {
    width: 0 !important;
  }
  body.page-id-66 .testimonial-gallery .testimonial-item {
    will-change: auto !important;
  }
  body:has(.ekko-lightbox.show) .modal-backdrop.show,
  body.page-id-66.modal-open .ekko-lightbox ~ .modal-backdrop.show,
  body.page-id-66.modal-open .modal-backdrop.show{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Disable :active press scale */
  body.page-id-66 a.page-numbers:active,
  body:has(.testimonial-gallery) a.page-numbers:active {
    transform: none !important;
  }
  /* Disable lightbox close transition */
  body.page-id-66 .ekko-lightbox .modal-header .close {
    transition: none !important;
  }
}


/* =========================================================
   ENHANCEMENTS (E1–E10)
   Added: 2026-02-06
   ========================================================= */


/* ---------------------------------------------------------
   E1 + E9) Card elevation, hover lift & spacing
   Merged: E1 (shadow + lift) + E9 (margin normalization).
   --------------------------------------------------------- */
body.page-id-66 .card-columns .card {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 10px;
  overflow: hidden;                    /* clip content to rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  transition: box-shadow .22s ease, transform .22s ease;
  -webkit-column-break-inside: avoid;  /* older WebKit/Safari <13 */
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

@media (hover: hover) {
  body.page-id-66 .card-columns .card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
  }
}


/* ---------------------------------------------------------
   E2) Avatar brand ring
   --------------------------------------------------------- */
body.page-id-66 .card .media img.rounded-circle {
  border: 2px solid var(--sc-yellow, #ffbe3d);
  box-shadow: 0 0 0 2px rgba(255, 190, 61, .18);
}


/* ---------------------------------------------------------
   E3) In-card HR refinement (gold gradient)
   --------------------------------------------------------- */
body.page-id-66 .card-body > hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 190, 61, .35) 25%,
    rgba(255, 190, 61, .35) 75%,
    transparent 100%
  );
  margin: .75rem 0;
}


/* ---------------------------------------------------------
   E4) Gallery clickability cue (expand icon overlay)
   Pure CSS — no icon font / SVG dependency.
   --------------------------------------------------------- */
body.page-id-66 .testimonial-gallery .testimonial-item::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .55);
  box-shadow:
    inset  7px  7px 0 -5px #fff,
    inset  9px  5px 0 -5px #fff,
    inset  5px  9px 0 -5px #fff,
    inset -7px -7px 0 -5px #fff,
    inset -9px -5px 0 -5px #fff,
    inset -5px -9px 0 -5px #fff;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
  z-index: 3;
}

@media (hover: hover) {
  body.page-id-66 .testimonial-gallery .testimonial-item:hover::after {
    opacity: 1;
    transform: scale(1);
  }
}

/* Always visible on touch (no hover) so users know images open */
@media (hover: none) {
  body.page-id-66 .testimonial-gallery .testimonial-item::after {
    opacity: .7;
    transform: scale(1);
  }
}


/* ---------------------------------------------------------
   E5) Star-rating gold normalization
   --------------------------------------------------------- */
body.page-id-66 .product-rating {
  color: var(--sc-yellow, #ffbe3d);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: .05em;
}

body.page-id-66 .product-rating i,
body.page-id-66 .product-rating span {
  color: inherit;
}


/* ---------------------------------------------------------
   E6) Product-link arrow micro-interaction
   NOTE: If the template already outputs a trailing "→"
   character inside .hover-arrow anchors, remove the ::after
   rule and keep only the gap + border-bottom interaction.
   --------------------------------------------------------- */
body.page-id-66 .card a.hover-arrow {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-weight: 600;
  color: var(--sc-dark, #111);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 190, 61, .5);
  transition: border-color .18s ease;  /* gap removed — non-animatable in Safari <16.4 */
}

body.page-id-66 .card a.hover-arrow::after {
  content: "\2192"; /* → */
  display: inline-block;
  transition: transform .18s ease;
}

@media (hover: hover) {
  body.page-id-66 .card a.hover-arrow:hover {
    border-bottom-color: var(--sc-yellow, #ffbe3d);
  }
  body.page-id-66 .card a.hover-arrow:hover::after {
    transform: translateX(3px);
  }
}

body.page-id-66 .card a.hover-arrow:focus-visible {
  outline: 2px solid var(--sc-yellow, #ffbe3d);
  outline-offset: 3px;
  border-bottom-color: transparent;
}


/* ---------------------------------------------------------
   E7) "Share Your Experience" CTA section polish
   Light background kept; subtle input, label, button, and
   validation refinements for a more polished feel.
   --------------------------------------------------------- */
body.page-id-66 #submit-testimonial {
  border-top: 3px solid var(--sc-yellow, #ffbe3d);
  position: relative;
}

body.page-id-66 #submit-testimonial h2 span[aria-hidden="true"] {
  display: inline-block;
  transition: transform .18s ease;
}

@media (hover: hover) {
  body.page-id-66 #submit-testimonial:hover h2 span[aria-hidden="true"] {
    transform: translateX(4px);
  }
}

body.page-id-66 #submit-testimonial .wpcf7 {
  margin-inline: auto;
}

/* 7a) Labels */
body.page-id-66 #submit-testimonial label {
  font-weight: 600;
  font-size: .85rem;
  color: #444;
  letter-spacing: .01em;
}

body.page-id-66 #submit-testimonial .text-danger {
  color: var(--sc-yellow, #ffbe3d) !important;
}

/* 7b) Inputs & selects — gold focus rings */
body.page-id-66 #submit-testimonial .form-control {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
  padding: .55rem .75rem;
  font-size: .9rem;
  transition: border-color .18s ease, box-shadow .18s ease;
  background: #fafafa;
}

body.page-id-66 #submit-testimonial .form-control:hover {
  border-color: rgba(0,0,0,.22);
}

body.page-id-66 #submit-testimonial .form-control:focus {
  outline: none;
}

body.page-id-66 #submit-testimonial .form-control:focus-visible {
  border-color: var(--sc-yellow, #ffbe3d);
  box-shadow: 0 0 0 3px rgba(255,190,61,.15);
  background: #fff;
  outline: none;
}

body.page-id-66 #submit-testimonial textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Tighten gap between submit button and disclaimer */
body.page-id-66 #submit-testimonial .text-center > p.mt-2 {
  margin-top: .4rem !important;
}

/* 7b-ii) Submit button — keyboard focus ring */
body.page-id-66 #submit-testimonial input[type="submit"]:focus-visible,
body.page-id-66 #submit-testimonial .wpcf7-submit:focus-visible {
  outline: 2px solid var(--sc-dark, #111);
  outline-offset: 3px;
}

/* 7c) File upload — branded upload zone */
body.page-id-66 #submit-testimonial .wpcf7-form-control-wrap[data-name^="file-"] {
  display: block;
  position: relative;
  padding: .6rem .75rem;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 8px;
  background: #fafafa;
  transition: border-color .18s ease, background .18s ease;
}

body.page-id-66 #submit-testimonial .wpcf7-form-control-wrap[data-name^="file-"]:hover {
  border-color: var(--sc-yellow, #ffbe3d);
  background: rgba(255,190,61,.03);
}

/* Style the native file input button via ::file-selector-button */
body.page-id-66 #submit-testimonial input[type="file"],
body.page-id-66 #submit-testimonial .form-control-file {
  font-size: .8rem;
  color: #666;
  width: 100%;
  cursor: pointer;
}

body.page-id-66 #submit-testimonial input[type="file"]::file-selector-button {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255,190,61,.4);
  border-radius: 5px;
  padding: .35rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  margin-right: .6rem;
  transition: background .18s ease, border-color .18s ease;
}

body.page-id-66 #submit-testimonial input[type="file"]::file-selector-button:hover {
  background: var(--sc-yellow, #ffbe3d);
  color: #000;
  border-color: var(--sc-yellow, #ffbe3d);
}

/* Webkit prefix for older Safari */
body.page-id-66 #submit-testimonial input[type="file"]::-webkit-file-upload-button {
  background: #1a1a1a;
  color: #fff;
  border: 1px solid rgba(255,190,61,.4);
  border-radius: 5px;
  padding: .35rem .75rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  margin-right: .6rem;
  transition: background .18s ease, border-color .18s ease;
}

body.page-id-66 #submit-testimonial input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--sc-yellow, #ffbe3d);
  color: #000;
  border-color: var(--sc-yellow, #ffbe3d);
}

/* Upload hint text */
body.page-id-66 #submit-testimonial .w-100.text-muted small {
  font-size: .75rem;
  color: #888 !important;
}

/* 7d) Checkboxes — gold accent */
body.page-id-66 #submit-testimonial .wpcf7-acceptance input[type="checkbox"] {
  accent-color: var(--sc-yellow, #ffbe3d);
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

body.page-id-66 #submit-testimonial .form-check-label {
  font-size: .82rem;
  line-height: 1.6;
  color: #555;
}

body.page-id-66 #submit-testimonial .form-check-label a {
  color: var(--sc-dark, #111);
  border-bottom: 1px solid rgba(255,190,61,.5);
  text-decoration: none;
  transition: border-color .18s ease;
}

body.page-id-66 #submit-testimonial .form-check-label a:hover {
  border-bottom-color: var(--sc-yellow, #ffbe3d);
}

body.page-id-66 #submit-testimonial .form-check-label a:focus-visible {
  outline: 2px solid var(--sc-yellow, #ffbe3d);
  outline-offset: 2px;
  border-bottom-color: transparent;
}

/* 7e) CF7 validation */
body.page-id-66 #submit-testimonial .wpcf7-not-valid-tip {
  display: block;
  color: #c0392b;
  font-size: .78rem;
  font-weight: 500;
  margin-top: .3rem;
}

body.page-id-66 #submit-testimonial .wpcf7-not-valid {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,.1) !important;
}

body.page-id-66 #submit-testimonial .wpcf7-response-output {
  border-radius: 8px;
  font-size: .85rem;
  padding: .75rem 1rem;
  margin-top: 1rem;
}

body.page-id-66 #submit-testimonial .wpcf7-form.sent .wpcf7-response-output {
  border-color: rgba(39,174,96,.3);
  background: rgba(39,174,96,.06);
  color: #1e8449;
}

body.page-id-66 #submit-testimonial .wpcf7-form.invalid .wpcf7-response-output,
body.page-id-66 #submit-testimonial .wpcf7-form.failed .wpcf7-response-output {
  border-color: rgba(192,57,43,.3);
  background: rgba(192,57,43,.06);
  color: #922b21;
}



/* ---------------------------------------------------------
   E8) Intro text refinements
   --------------------------------------------------------- */
body.page-id-66 #content > p {
  line-height: 1.8;
  color: #444;                        /* from about: softer than pure black */
  margin-bottom: .65rem;              /* tighter than Bootstrap default 1rem */
}


/* ---------------------------------------------------------
   E11) Hero HR — gold gradient (from about page)
   Styles the <hr> under the breadcrumb inside .shop-header.
   --------------------------------------------------------- */
body.page-id-66 .shop-header hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,190,61,.3) 30%,
    rgba(255,190,61,.5) 50%,
    rgba(255,190,61,.3) 70%,
    transparent
  );
  margin: 1rem auto 1.25rem;
  max-width: 280px;
}

@media (max-width: 768px) {
  body.page-id-66 .shop-header hr {
    max-width: 180px;
  }
}


/* ---------------------------------------------------------
   E12) Breadcrumb — softer, tighter (from about page)
   --------------------------------------------------------- */
body.page-id-66 .shop-header #breadcrumbs {
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
}

body.page-id-66 .shop-header #breadcrumbs a {
  color: rgba(255,255,255,.65);
  transition: color .2s ease;
}

body.page-id-66 .shop-header #breadcrumbs a:hover {
  color: #ffbe3d;
}

body.page-id-66 .shop-header #breadcrumbs a:focus-visible {
  outline: 2px solid rgba(255,190,61,.85);
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   E13) Section divider <hr> — gold gradient (from about page)
   Targets <hr> elements between intro text and card grid.
   Avoids in-card <hr> already styled in E3.
   --------------------------------------------------------- */
body.page-id-66 #content > hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,190,61,.25) 40%,
    rgba(255,190,61,.4) 50%,
    rgba(255,190,61,.25) 60%,
    transparent
  );
  margin: 1.25rem auto !important;
}


/* ---------------------------------------------------------
   E14) Page headings — expanding gold underline on hover
   (from about page .h3::after pattern)
   --------------------------------------------------------- */
body.page-id-66 #content > h1,
body.page-id-66 #content > h2:not(.sr-only) {
  position: relative;
  display: inline-block;
  padding-bottom: .35rem;
}

body.page-id-66 #content > h1::after,
body.page-id-66 #content > h2:not(.sr-only)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  max-width: 120px;
  height: 2px;
  background: #ffbe3d;
  border-radius: 1px;
  transition: width .35s ease, margin-left .35s ease;
  margin-left: 0;
}

@media (hover: hover) {
  body.page-id-66 #content > h1:hover::after,
  body.page-id-66 #content > h2:not(.sr-only):hover::after {
    width: 120px;
    margin-left: -60px;
  }
}

@media (hover: none) {
  body.page-id-66 #content > h1:hover::after,
  body.page-id-66 #content > h2:not(.sr-only):hover::after {
    width: 0;
  }
}


/* ---------------------------------------------------------
   E15) "Share Your Scopione Experience" anchor link — gold
   (from about page .hover-arrow treatment)
   --------------------------------------------------------- */
body.page-id-66 #content > p .hover-arrow {
  color: #ffbe3d;
  font-weight: 700;
  transition: color .2s ease;
}

body.page-id-66 #content > p .hover-arrow:hover {
  color: #ffd877;
  text-decoration: none;
}

body.page-id-66 #content > p .hover-arrow:focus-visible {
  outline: 2px solid #ffbe3d;
  outline-offset: 2px;
}


/* ---------------------------------------------------------
   E16) Vertical rhythm — consistent section spacing
   Uses !important to override Bootstrap spacing utilities.
   Hero padding handled by py-5 in PHP template.
   --------------------------------------------------------- */

/* Main container — override Bootstrap mt-3/mb-2 */
body.page-id-66 #main {
  margin-top: 1rem !important;          /* hero → first paragraph breathing room */
  margin-bottom: 0 !important;          /* was .5rem (mb-2) — pagination mb handles gap */
}

/* Visible H2 headings — pull up toward intro (skip .sr-only) */
body.page-id-66 #content > h2:not(.sr-only) {
  margin-top: 0 !important;
  margin-bottom: .75rem !important;
}

/* Card grid — breathing room after HR divider */
body.page-id-66 .card-columns {
  margin-top: .75rem !important;
}

/* Pagination spacing */
body.page-id-66 nav.test-pagination {
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* CTA form section — generous padding around gold border */
body.page-id-66 #submit-testimonial {
  margin-top: 0 !important;
  padding-top: 2rem !important;
  padding-bottom: 1.75rem !important;
}

/* Form heading wrapper — internal spacing */
body.page-id-66 #submit-testimonial > .container > .text-center {
  margin-top: .25rem !important;
  margin-bottom: 1.25rem !important;
}

/* Reduce gap below form / above footer */
body.page-id-66 #submit-testimonial .wpcf7 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.page-id-66 #submit-testimonial > p:last-of-type {
  margin-bottom: .5rem !important;
}


/* E17) Reduced motion + touch coverage for E11–E16:
   merged into Section 7 above. */


/* ---------------------------------------------------------
   E10) Print styles
   --------------------------------------------------------- */
@media print {
  /* Single column, no masonry */
  body.page-id-66 .card-columns {
    column-count: 1 !important;
  }

  /* Kill shadows and transforms */
  body.page-id-66 .card-columns .card {
    box-shadow: none !important;
    transform: none !important;
    border: 1px solid #ccc !important;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }

  /* Hide pagination */
  body.page-id-66 nav.test-pagination,
  body.page-id-66 .test-pagination ~ hr,
  body.page-id-66 :is(nav.navigation.pagination, nav.pagination) {
    display: none !important;
  }

  /* Hide submission form */
  body.page-id-66 #submit-testimonial {
    display: none !important;
  }

  /* Gallery: remove hover overlays */
  body.page-id-66 .testimonial-gallery .testimonial-item::after {
    display: none !important;
  }

  /* Avatar: no glow on paper */
  body.page-id-66 .card .media img.rounded-circle {
    box-shadow: none !important;
  }

  /* Force black text */
  body.page-id-66 .card,
  body.page-id-66 .card-body {
    color: #000 !important;
  }

  /* Show link URLs inline */
  body.page-id-66 .card a.hover-arrow::after {
    content: " (" attr(href) ")";
    font-size: .8em;
    color: #666;
  }
}


/* Reduced-motion rules for E1-E10 merged into Section 7 above.
   See @media (prefers-reduced-motion: reduce) block. */

/* =========================================================
   END SCOPIONE — Testimonials Page Styles
   ========================================================= */