/* ============================================================
   SwiftSlide v1.6.0
   All rules under .ss-outer to beat Woodmart/any theme CSS
   ============================================================ */

.ss-outer, .ss-outer * { box-sizing: border-box; }

/* ── Outer wrapper ─────────────────────────────────────────── */
.ss-outer {
    width: 100%;
    position: relative; /* needed for outside-dots positioning */
}

/* ── Slider shell ──────────────────────────────────────────── */
.ss-outer .ss-slider {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

/* When dots are OUTSIDE we need extra bottom/top space on the outer */
.ss-outer.ss-dots-outside-bottom { padding-bottom: 40px !important; }
.ss-outer.ss-dots-outside-top    { padding-top: 40px !important; }

/* ── Track ─────────────────────────────────────────────────── */
.ss-outer .ss-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    will-change: transform;
}

/* ── Individual Slide ──────────────────────────────────────── */
.ss-outer .ss-slide {
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center center !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Side-by-side multi ────────────────────────────────────── */
.ss-outer .ss-slider.ss-spv-multi .ss-slide {
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ── Fade mode ─────────────────────────────────────────────── */
.ss-outer .ss-slider.ss-fade .ss-track {
    display: block !important;
    position: relative !important;
    height: 100% !important;
}
.ss-outer .ss-slider.ss-fade .ss-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    flex: none !important;
    opacity: 0 !important;
    z-index: 1 !important;
    transition: opacity var(--ss-tspeed, 800ms) ease !important;
}
.ss-outer .ss-slider.ss-fade .ss-slide.ss-active {
    opacity: 1 !important;
    z-index: 2 !important;
    position: relative !important;
}

/* ── Overlay ───────────────────────────────────────────────── */
.ss-outer .ss-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* ── Whole-slide link ──────────────────────────────────────── */
.ss-outer .ss-slide-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: block !important;
    background: transparent !important;
    border: none !important;
}

/* ── Content block ─────────────────────────────────────────── */
.ss-outer .ss-content {
    position: absolute !important;
    z-index: 15 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-width: 65% !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
}
.ss-outer .ss-content .ss-btn,
.ss-outer .ss-content a { pointer-events: auto !important; }

.ss-outer .ss-h-left   { left: 0 !important;   right: auto !important; text-align: left !important;   align-items: flex-start !important; }
.ss-outer .ss-h-center { left: 50% !important;  right: auto !important; transform: translateX(-50%) !important; text-align: center !important; align-items: center !important; }
.ss-outer .ss-h-right  { right: 0 !important;   left: auto !important;  text-align: right !important;  align-items: flex-end !important; }
.ss-outer .ss-v-top    { top: 0 !important;    bottom: auto !important; }
.ss-outer .ss-v-middle { top: 50% !important;  transform: translateY(-50%) !important; }
.ss-outer .ss-v-bottom { bottom: 0 !important; top: auto !important; }
.ss-outer .ss-h-center.ss-v-middle { top: 50% !important; left: 50% !important; transform: translate(-50%,-50%) !important; }

/* ── Text ──────────────────────────────────────────────────── */
.ss-outer .ss-heading   { margin:0 !important; padding:0 !important; line-height:1.2 !important; text-shadow:0 2px 10px rgba(0,0,0,.35); background:transparent !important; border:none !important; }
.ss-outer .ss-subheading{ margin:0 !important; padding:0 !important; line-height:1.5 !important; text-shadow:0 1px 6px rgba(0,0,0,.25); background:transparent !important; border:none !important; }

/* ── Button ────────────────────────────────────────────────── */
.ss-outer .ss-btn {
    display: inline-block !important;
    padding: 12px 28px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    transition: filter .2s, transform .15s !important;
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    margin: 0 !important;
}
.ss-outer .ss-btn:hover { filter: brightness(1.1) !important; transform: translateY(-2px) !important; text-decoration: none !important; }

/* ═══════════════════════════════════════════════════════════
   NAVIGATION ARROWS
   Both arrows are ALWAYS rendered in HTML.
   Per-device visibility controlled by CSS classes:
     .ss-hide-desk  → display:none on desktop
     .ss-hide-tab   → display:none on tablet
     .ss-hide-mob   → display:none on mobile
═══════════════════════════════════════════════════════════ */
.ss-outer .ss-nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 40 !important;
    background: var(--ss-nav-bg, rgba(255,255,255,0.92)) !important;
    color:      var(--ss-nav-color, #333) !important;
    border: none !important;
    width:  var(--ss-nav-size, 46px) !important;
    height: var(--ss-nav-size, 46px) !important;
    min-width: 0 !important; max-width: none !important;
    min-height: 0 !important; max-height: none !important;
    border-radius: var(--ss-nav-radius, 50%) !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.15) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    user-select: none !important;
    transition: background .2s, color .2s, transform .2s, box-shadow .2s !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.ss-outer .ss-nav:focus,
.ss-outer .ss-nav:focus-visible,
.ss-outer .ss-nav:active,
.ss-outer .ss-nav::-moz-focus-inner {
    outline: none !important;
    outline-color: transparent !important;
    border: none !important;
    box-shadow: 0 2px 14px rgba(0,0,0,.15) !important;
}
.ss-outer .ss-nav:hover {
    background:  var(--ss-nav-bg-hover, #fff) !important;
    color:       var(--ss-nav-color-hover, #333) !important;
    box-shadow:  0 4px 22px rgba(0,0,0,.22) !important;
    transform:   translateY(-50%) scale(1.1) !important;
    outline: none !important;
}
.ss-outer .ss-prev { left:  var(--ss-nav-pos-h, 16px) !important; right: auto !important; }
.ss-outer .ss-next { right: var(--ss-nav-pos-h, 16px) !important; left:  auto !important; }

/* Per-device visibility */
@media (min-width: 1025px) { .ss-outer .ss-nav.ss-hide-desk { display: none !important; } }
@media (min-width: 601px) and (max-width: 1024px) { .ss-outer .ss-nav.ss-hide-tab { display: none !important; } }
@media (max-width: 600px)  { .ss-outer .ss-nav.ss-hide-mob  { display: none !important; } }

/* ═══════════════════════════════════════════════════════════
   DOTS
   Uses <span> elements to avoid theme button interference.
   Positions:
     inside_bottom  → absolute bottom of .ss-slider
     inside_top     → absolute top of .ss-slider
     outside_bottom → absolute bottom of .ss-outer (outside slider)
     outside_top    → absolute top of .ss-outer (outside slider)
═══════════════════════════════════════════════════════════ */
.ss-outer .ss-dots {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 40 !important;
    width: auto !important;
    height: auto !important;
}
/* Inside slider positions */
.ss-outer .ss-dots-inside {
    position: absolute !important;
}
.ss-outer .ss-dots-inside.ss-dots-bottom {
    bottom: var(--ss-dots-offset, 16px) !important;
    top: auto !important;
}
.ss-outer .ss-dots-inside.ss-dots-top {
    top: var(--ss-dots-offset, 16px) !important;
    bottom: auto !important;
}
/* Outside slider positions — relative to .ss-outer */
.ss-outer .ss-dots-outside {
    position: absolute !important;
}
.ss-outer .ss-dots-outside.ss-dots-bottom {
    bottom: var(--ss-dots-offset, 8px) !important;
    top: auto !important;
}
.ss-outer .ss-dots-outside.ss-dots-top {
    top: var(--ss-dots-offset, 8px) !important;
    bottom: auto !important;
}

/* Dot appearance */
.ss-outer .ss-dot {
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important; min-height: 10px !important;
    max-width: 10px !important; max-height: 10px !important;
    border-radius: 50% !important;
    background: var(--ss-dot-bg, rgba(255,255,255,0.5)) !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    vertical-align: middle !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    transition: background .25s, width .3s, border-radius .3s !important;
    text-decoration: none !important;
    float: none !important;
    opacity: 1 !important;
}
.ss-outer .ss-dot:hover {
    background: var(--ss-dot-bg-hover, rgba(255,255,255,0.8)) !important;
}
.ss-outer .ss-dot.ss-dot-active {
    background: var(--ss-dot-active-bg, #fff) !important;
    width: 24px !important;
    max-width: 24px !important;
    border-radius: 5px !important;
}
@keyframes ss-dot-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.5); }
    100% { transform: scale(1); }
}
.ss-outer .ss-dot.ss-dot-anim { animation: ss-dot-pop .3s ease forwards !important; }

/* ── Content animations ────────────────────────────────────── */
.ss-outer .ss-heading,
.ss-outer .ss-subheading { opacity: 0; }
.ss-outer .ss-btn { opacity: 1 !important; }
.ss-outer .ss-slide.ss-active .ss-heading,
.ss-outer .ss-slide.ss-active .ss-subheading { opacity: 1; }
.ss-outer .ss-slide.ss-active .ss-heading    { animation-delay: .05s; }
.ss-outer .ss-slide.ss-active .ss-subheading { animation-delay: .18s; }
.ss-outer .ss-slide.ss-active .ss-btn        { animation-delay: .30s; }
.ss-outer .ss-slide.ss-active .ss-anim-fadeIn    { animation: ss-fadeIn    .7s ease both; }
.ss-outer .ss-slide.ss-active .ss-anim-slideUp   { animation: ss-slideUp   .65s cubic-bezier(.22,1,.36,1) both; }
.ss-outer .ss-slide.ss-active .ss-anim-slideDown { animation: ss-slideDown .65s cubic-bezier(.22,1,.36,1) both; }
.ss-outer .ss-slide.ss-active .ss-anim-zoomIn    { animation: ss-zoomIn   .55s cubic-bezier(.22,1,.36,1) both; }
.ss-outer .ss-slide.ss-active .ss-anim-bounceIn  { animation: ss-bounceIn .7s both; }
.ss-outer .ss-anim-none { animation: none !important; opacity: 1 !important; }

@keyframes ss-fadeIn    { from{opacity:0}                            to{opacity:1} }
@keyframes ss-slideUp   { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes ss-slideDown { from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)} }
@keyframes ss-zoomIn    { from{opacity:0;transform:scale(.8)}        to{opacity:1;transform:scale(1)} }
@keyframes ss-bounceIn  { 0%{opacity:0;transform:scale(.75)} 55%{opacity:1;transform:scale(1.06)} 75%{transform:scale(.96)} 100%{opacity:1;transform:scale(1)} }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width:1024px) { .ss-outer .ss-content { max-width:78% !important; } }
@media (max-width:600px)  {
    .ss-outer .ss-content    { max-width:92% !important; }
    .ss-outer .ss-nav        { width:36px !important; height:36px !important; font-size:14px !important; }
    .ss-outer .ss-track      { gap:0 !important; }
}