/* SC Product Carousel — Frontend Styles */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* === Outer centering shell — wraps everything, works inside Elementor === */
.sc-carousel-wrapper {
    --sc-primary:      #899A89;
    --sc-primary-dk:   #6b7c6c;
    --sc-hover-cart:   #B67A69;
    --sc-badge-bg:     #D9C8B4;
    --sc-badge-text:   #ffffff;
    --sc-card-bg:      #ffffff;
    --sc-card-radius:  20px;
    --sc-img-h:        210px;
    --sc-info-h:       192px;
    --sc-gap:          18px;
    --sc-cols:         3;
    --sc-font:         "Outfit", -apple-system, BlinkMacSystemFont, sans-serif;
    --sc-transition:   .22s cubic-bezier(.4,0,.2,1);

    /* Take full width of parent, then center children */
    display:        flex !important;
    flex-direction: column !important;
    align-items:    center !important;   /* centers .sc-tabs-nav and .sc-carousel-outer */
    width:          100% !important;
    box-sizing:     border-box;
    font-family:    var(--sc-font);
    -webkit-font-smoothing: antialiased;
    text-align:     left;               /* reset any Elementor text-align:center */
}

/* Both the tabs and the carousel outer share the same max-width and stretch to fill it */
.sc-carousel-wrapper .sc-tabs-nav,
.sc-carousel-wrapper .sc-carousel-outer {
    width:      100%;
    max-width:  calc(320px * 3 + 18px * 2);  /* 996px: 3 × 320 + 2 × 18 */
    box-sizing: border-box;
}

/* ============================================================
   TABS — centered, transparent, #B67A69 inactive text
   ============================================================ */
.sc-tabs-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 0 28px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
    flex-wrap: wrap;
}

/* Force all button resets */
.sc-carousel-wrapper .sc-tab-btn,
.sc-carousel-wrapper .sc-tab-btn:link,
.sc-carousel-wrapper .sc-tab-btn:visited {
    all: unset !important;
    display: inline-block !important;
    cursor: pointer !important;
    font-family: var(--sc-font) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #B67A69 !important;
    padding: 8px 20px 10px !important;
    position: relative !important;
    transition: color .22s !important;
    white-space: nowrap !important;
    line-height: 1.3 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    -webkit-appearance: none !important;
}

.sc-carousel-wrapper .sc-tab-btn:hover,
.sc-carousel-wrapper .sc-tab-btn:focus,
.sc-carousel-wrapper .sc-tab-btn:active {
    color: #8a5548 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    outline: none !important;
}

.sc-carousel-wrapper .sc-tab-btn::after {
    content: '';
    position: absolute !important;
    bottom: 0 !important;
    left: 20px !important;
    right: 20px !important;
    height: 2px !important;
    background: #899A89 !important;
    transform: scaleX(0) !important;
    transition: transform .22s !important;
    transform-origin: center !important;
    border-radius: 2px !important;
}

.sc-carousel-wrapper .sc-tab-btn.sc-tab-active {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.sc-carousel-wrapper .sc-tab-btn.sc-tab-active::after {
    transform: scaleX(1) !important;
}

/* ============================================================
   CAROUSEL OUTER — centered, max width = 3×320 + 2×gap
   ============================================================ */
.sc-carousel-outer {
    position: relative;
    overflow: visible;
    max-width: calc(320px * 3 + var(--sc-gap) * 2);  /* 960px + 36px = 996px */
    margin: 0 auto;   /* center when page is wider */
}

/* Track wrap — clips the sliding cards */
.sc-carousel-track-wrap {
    overflow: hidden;
    width: 100%;
}

/* Track — slides sit here */
.sc-carousel-track {
    display: flex;
    gap: var(--sc-gap);
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    align-items: stretch;
}

/* ============================================================
   PRODUCT SLIDE — fluid within the capped outer width
   Desktop 3 cols, tablet 2, mobile 1
   ============================================================ */
.sc-product-slide {
    flex: 0 0 calc((100% - var(--sc-gap) * (var(--sc-cols) - 1)) / var(--sc-cols));
    width:     calc((100% - var(--sc-gap) * (var(--sc-cols) - 1)) / var(--sc-cols));
    min-width: 0;
}

/* tablet: 2 cols */
@media (max-width: 860px) {
    .sc-carousel-wrapper { --sc-cols: 2; --sc-img-h: 170px; --sc-info-h: auto; }
}

/* mobile: 1 col */
@media (max-width: 560px) {
    .sc-carousel-wrapper { --sc-cols: 1; --sc-img-h: 190px; }
}

/* ============================================================
   ARROW — 64×64, #D9C8B480, square, right: -40px
   ============================================================ */
.sc-carousel-wrapper .sc-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64px !important;
    height: 64px !important;
    background: rgba(217,200,180,0.5) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 20 !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    transition: background .22s !important;
}

.sc-carousel-wrapper .sc-arrow-prev {
    display: none !important;
}

.sc-carousel-wrapper .sc-arrow-next {
    right: -40px !important;
}

.sc-carousel-wrapper .sc-arrow:hover {
    background: rgba(217,200,180,0.85) !important;
}

.sc-carousel-wrapper .sc-arrow:active {
    transform: translateY(-50%) scale(.97) !important;
}

.sc-carousel-wrapper .sc-arrow svg {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
}

.sc-carousel-wrapper .sc-arrow.sc-arrow-disabled {
    opacity: .35 !important;
    cursor: default !important;
    pointer-events: none !important;
}

@media (max-width: 860px) {
    .sc-carousel-wrapper .sc-arrow-next { right: -24px !important; }
    .sc-carousel-wrapper .sc-arrow { width: 48px !important; height: 48px !important; }
}
@media (max-width: 560px) {
    .sc-carousel-wrapper .sc-arrow-next { right: -20px !important; }
    .sc-carousel-wrapper .sc-arrow { width: 40px !important; height: 40px !important; }
}

/* ============================================================
   PRODUCT CARD — overflow hidden kills any gap between img/info
   ============================================================ */
.sc-product-card {
    background:     var(--sc-card-bg);
    border-radius:  var(--sc-card-radius);
    box-shadow:     none !important;
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    gap:            0;
    width:          100%;
}

/* ============================================================
   IMAGE BLOCK — fixed height, no margin, no bottom radius
   ============================================================ */
.sc-product-image-wrap {
    display:       block;
    position:      relative;
    overflow:      hidden;
    width:         100%;
    height:        var(--sc-img-h);
    flex:          0 0 var(--sc-img-h);
    background:    #f0ece7;
    text-decoration: none;
    border-radius: var(--sc-card-radius) var(--sc-card-radius) 0 0;
    margin:        0 !important;
    padding:       0 !important;
    line-height:   0;
    font-size:     0;
}

.sc-product-image-wrap img {
    display:         block !important;
    width:           100% !important;
    height:          100% !important;
    object-fit:      cover;
    margin:          0 !important;
    padding:         0 !important;
    border:          none !important;
    vertical-align:  bottom !important;
    transition:      transform .45s cubic-bezier(.4,0,.2,1);
}

.sc-product-image-wrap:hover img {
    transform: scale(1.04);
}

/* ============================================================
   NIEUW! BADGE — 104×36, Outfit 16px weight 300, top/left 30px
   ============================================================ */
.sc-badge-new {
    position:    absolute;
    top:         30px;
    left:        30px;
    background:  var(--sc-badge-bg);
    color:       var(--sc-badge-text);
    font-family: "Outfit", sans-serif;
    font-size:   16px;
    font-weight: 300;
    width:       104px;
    height:      36px;
    display:     flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    z-index:     2;
    pointer-events: none;
    line-height: 1;
    box-sizing:  border-box;
    margin:      0;
    padding:     0;
}

/* ============================================================
   INFO BLOCK — fixed height 192px, no top radius
   ============================================================ */
.sc-product-info {
    width:          100%;
    height:         var(--sc-info-h);
    flex:           0 0 var(--sc-info-h);
    padding:        18px 20px 20px;
    display:        flex;
    flex-direction: column;
    box-sizing:     border-box;
    background:     var(--sc-card-bg);
    border-radius:  0 0 var(--sc-card-radius) var(--sc-card-radius);
    margin:         0 !important;
}

@media (max-width: 860px) {
    .sc-product-info { height: auto; flex: 1 1 auto; }
}

/* Title */
.sc-product-title {
    display:             -webkit-box;
    -webkit-line-clamp:  2;
    -webkit-box-orient:  vertical;
    overflow:            hidden;
    font-family:         var(--sc-font);
    font-size:           15px;
    font-weight:         700;
    color:               #404040 !important;
    text-decoration:     none !important;
    line-height:         1.35;
    margin:              0;
}

.sc-product-title:hover { color: var(--sc-primary-dk) !important; }

.sc-product-spacer { flex: 1; min-height: 8px; }

/* Bottom row */
.sc-product-bottom {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             10px;
}

.sc-product-pricing {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

.sc-price-excl {
    font-family: var(--sc-font);
    font-size:   16px;
    font-weight: 600;
    color:       #899A89 !important;
    margin:      0;
    padding:     0;
}

.sc-price-incl {
    font-family: var(--sc-font);
    font-size:   13px;
    font-weight: 500;
    color:       #555555 !important;
    margin:      0;
    padding:     0;
}

.sc-price-incl .sc-incl-label {
    font-size:   10px;
    font-weight: 400;
    color:       #555555;
    margin-left: 2px;
}

/* "Op aanvraag" — shown when price = 0 */
.sc-price-op-aanvraag {
    font-family:  var(--sc-font);
    font-size:    15px;
    font-weight:  600;
    color:        #899A89 !important;
    font-style:   italic;
    margin:       0;
    padding:      0;
}

/* Cart button */
.sc-add-to-cart {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    width:           46px !important;
    height:          46px !important;
    min-width:       46px !important;
    background:      #899A89 !important;
    border-radius:   10px !important;
    border:          none !important;
    box-shadow:      none !important;
    color:           #ffffff !important;
    text-decoration: none !important;
    transition:      background .22s !important;
    flex-shrink:     0;
}

.sc-add-to-cart svg {
    width:   22px !important;
    height:  22px !important;
    display: block !important;
    fill:    #ffffff !important;
}

.sc-add-to-cart:hover,
.sc-add-to-cart:focus {
    background: #B67A69 !important;
    transform:  none !important;
}

/* Loading */
.sc-loading-overlay {
    position:   absolute;
    inset:      0;
    background: rgba(245,241,236,.7);
    display:    flex;
    align-items: center;
    justify-content: center;
    opacity:    0;
    pointer-events: none;
    transition: opacity .2s;
    z-index:    30;
}
.sc-carousel-wrapper.sc-is-loading .sc-loading-overlay {
    opacity: 1;
    pointer-events: auto;
}
.sc-spinner {
    width:  32px;
    height: 32px;
    border: 3px solid rgba(217,200,180,.5);
    border-top-color: #899A89;
    border-radius: 50%;
    animation: sc-spin .65s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }

.sc-empty {
    padding:    40px 20px;
    text-align: center;
    color:      #888;
    font-size:  14px;
    width:      100%;
}

/* Fade-in */
@keyframes sc-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.sc-product-slide                { animation: sc-fade-in .28s ease both; }
.sc-product-slide:nth-child(1)   { animation-delay: 0ms; }
.sc-product-slide:nth-child(2)   { animation-delay: 55ms; }
.sc-product-slide:nth-child(3)   { animation-delay: 110ms; }
.sc-product-slide:nth-child(4)   { animation-delay: 165ms; }
.sc-product-slide:nth-child(5)   { animation-delay: 220ms; }
.sc-product-slide:nth-child(6)   { animation-delay: 275ms; }