/* Container */
.sqslider { position: relative; width: 100%; font-family: 'Quattrocento', serif; }
.sqtrack { position: relative; }

/* Slides */
.sqslides { list-style:none; margin:0; padding:0; }
.sqslide { display:none; }
.sqslide.is-active { display:block; }

/* Frame: square with white background */
.sqframe { background:#fff; aspect-ratio:1/1; display:grid; place-items:center; }
.sqframe img { max-width:100%; max-height:100%; object-fit:contain; display:block; }

/* Typography */
.sqtitle { font-weight:700; font-size:22px; line-height:1.3; text-align:center; margin-top:8px; }
.sqcaption { font-weight:400; font-size:16px; line-height:1.4; text-align:center; margin-top:4px; }

/* Arrows (outside image) */
.sqnav { position:absolute; top: calc(50% - var(--sq-arrow-size,28px)/2); transform: translateY(-50%); background:transparent; border:0; cursor:pointer; width:var(--sq-arrow-size,28px); height:var(--sq-arrow-size,28px); padding:0; }
.sqnav::before { content:''; display:block; width:100%; height:100%; border-top:2px solid var(--sq-arrow-color,#000); border-right:2px solid var(--sq-arrow-color,#000); }
.sqnav.prev { left:-40px; }
.sqnav.prev::before { transform: rotate(-135deg); }
.sqnav.next { right:-40px; }
.sqnav.next::before { transform: rotate(45deg); }

@media (max-width:640px){ .sqnav.prev{ left:-24px;} .sqnav.next{ right:-24px;} }

/* Fade transition */
.sqslide.is-fading { animation: sqfade .35s ease; }
@keyframes sqfade { from{ opacity:0 } to{ opacity:1 } }

/* Force slider text to white (beats theme/Divi rules) */
.sqslider figcaption,
.sqslider figcaption *,
.sqslider .sqtitle,
.sqslider .sqcaption {
  color: #fff !important;
}

/* Add at the very bottom of wp-content/plugins/sqslider/assets/front.css */

/* Force NAV ARROWS to WHITE (overrides theme/Divi) */
.sqslider { --sq-arrow-color: #fff !important; }
.sqslider .sqnav::before {
  border-top-color: #fff !important;
  border-right-color: #fff !important;
}

/* If you want BLACK instead, use this block instead of the one above:
.sqslider { --sq-arrow-color: #000 !important; }
.sqslider .sqnav::before {
  border-top-color: #000 !important;
  border-right-color: #000 !important;
}
*/