/* Yasta Fashion V4.9.0 — Product Conversion Experience */

.yf-detail[data-product-experience="4.9.0"] {
    --yf-orange: #f45b2a;
    --yf-orange-dark: #d94718;
    --yf-ink: #172033;
    --yf-muted: #667085;
    --yf-line: #e6eaf0;
}

.yf-detail[data-product-experience="4.9.0"] .yf-detail-card {
    border: 1px solid var(--yf-line);
    box-shadow: 0 18px 52px rgba(23, 32, 51, .08);
}

.yf-selection-summary {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
    padding: 11px 12px;
    border: 1px solid #e7ebf0;
    border-radius: 14px;
    background: linear-gradient(135deg, #f9fafc, #fff);
}

.yf-selection-summary-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #fff0ea;
    color: var(--yf-orange);
    font-size: 17px;
}

.yf-selection-summary-copy {
    min-width: 0;
    flex: 1;
}

.yf-selection-summary-copy small,
.yf-selection-summary-copy strong {
    display: block;
}

.yf-selection-summary-copy small {
    color: var(--yf-muted);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .45px;
}

.yf-selection-summary-copy strong {
    margin-top: 2px;
    overflow: hidden;
    color: var(--yf-ink);
    font-size: 11px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yf-selection-summary-stock {
    padding: 5px 8px;
    border-radius: 999px;
    background: #fff4df;
    color: #8a6100;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
}

.yf-selection-summary.is-ready {
    border-color: #cce8d7;
    background: linear-gradient(135deg, #f1fbf5, #fff);
}

.yf-selection-summary.is-ready .yf-selection-summary-icon {
    background: #e8f8ee;
    color: #198754;
}

.yf-selection-summary.is-ready .yf-selection-summary-stock {
    background: #e8f8ee;
    color: #157347;
}

.yf-gallery-swipe-hint {
    display: none;
}

.yf-mobile-action-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.05;
}

.yf-mobile-action-copy strong {
    font-size: 11px;
    font-weight: 950;
}

.yf-mobile-action-copy small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .82);
    font-size: 7px;
    font-weight: 700;
}

.yf-mobile-price-hint {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #667085;
    font-size: 7px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yf-variant-sheet {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
}

.yf-variant-sheet.is-open {
    display: block;
}

.yf-variant-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.yf-variant-sheet-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: min(82vh, 720px);
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    background: #fff;
    box-shadow: 0 -20px 60px rgba(15, 23, 42, .22);
    transform: translateY(18px);
    animation: yfVariantSheetIn .22s ease forwards;
}

.yf-variant-sheet-handle {
    width: 42px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 999px;
    background: #d9dde3;
}

.yf-variant-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px 11px;
    border-bottom: 1px solid #edf0f3;
}

.yf-variant-sheet-head strong,
.yf-variant-sheet-head small {
    display: block;
}

.yf-variant-sheet-head strong {
    color: var(--yf-ink);
    font-size: 14px;
    font-weight: 950;
}

.yf-variant-sheet-head small {
    margin-top: 2px;
    color: var(--yf-muted);
    font-size: 8px;
}

.yf-variant-sheet-close {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f1f3f6;
    color: #4d5665;
}

.yf-variant-sheet-content {
    max-height: calc(min(82vh, 720px) - 132px);
    overflow-y: auto;
    padding: 12px;
    overscroll-behavior: contain;
}

.yf-variant-sheet-content .yf-buy-panel {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.yf-variant-sheet-content .yf-actions,
.yf-variant-sheet-content .yf-btn-chat {
    display: none !important;
}

.yf-variant-sheet-footer {
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid #edf0f3;
    background: #fff;
}

.yf-variant-sheet-confirm {
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, #ff7a45, var(--yf-orange), var(--yf-orange-dark));
    box-shadow: 0 10px 24px rgba(244, 91, 42, .28);
    font-size: 12px;
    font-weight: 950;
}

body.yf-variant-sheet-open {
    overflow: hidden;
    touch-action: none;
}

@keyframes yfVariantSheetIn {
    to { transform: translateY(0); }
}

@media (min-width: 992px) {
    .yf-detail[data-product-experience="4.9.0"] .yf-buy-panel {
        position: sticky;
        top: 88px;
    }
}

@media (max-width: 767.98px) {
    .yf-detail[data-product-experience="4.9.0"] {
        padding-top: 6px;
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-detail-container {
        width: 100%;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-detail-card {
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-detail-card > .row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-gallery {
        margin: 0 0 8px;
        background: #fff;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-media-stage {
        border-radius: 0;
        touch-action: pan-y;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-media-item img,
    .yf-detail[data-product-experience="4.9.0"] .yf-media-item video {
        border-radius: 0;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-thumbnails {
        padding: 8px 10px 9px;
        background: #fff;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-thumbnail {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 10px;
    }

    .yf-gallery-swipe-hint {
        position: absolute;
        right: 12px;
        bottom: 12px;
        z-index: 6;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 8px;
        border-radius: 999px;
        background: rgba(17, 24, 39, .68);
        color: #fff;
        font-size: 7px;
        font-weight: 800;
        pointer-events: none;
    }

    .yf-detail[data-product-experience="4.9.0"] .col-lg-7 {
        padding: 14px 12px 0;
        background: #fff;
        border-radius: 16px 16px 0 0;
    }

    .yf-product-kicker {
        font-size: 8px !important;
    }

    .yf-product-name {
        margin-top: 7px !important;
        font-size: 19px !important;
        line-height: 1.32 !important;
    }

    .yf-product-meta {
        gap: 6px !important;
        margin-top: 8px !important;
    }

    .yf-product-meta span {
        font-size: 7.5px !important;
    }

    .yf-product-share {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        justify-content: center;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, .94) !important;
        box-shadow: 0 7px 18px rgba(23, 32, 51, .13);
    }

    .yf-product-share span {
        display: none;
    }

    .yf-price-box {
        margin-top: 12px !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
    }

    .yf-price {
        font-size: 24px !important;
    }

    .yf-price-note {
        font-size: 8px !important;
    }

    .yf-stock {
        margin-top: 9px !important;
        padding: 9px 11px !important;
        border-radius: 12px !important;
    }

    .yf-stock strong {
        font-size: 10px !important;
    }

    .yf-stock span {
        font-size: 8px !important;
    }

    .yf-service-grid {
        gap: 7px !important;
        margin: 9px 0 11px !important;
    }

    .yf-service {
        min-height: 58px;
        padding: 8px !important;
        border-radius: 12px !important;
    }

    .yf-service-icon {
        width: 31px !important;
        height: 31px !important;
        flex-basis: 31px !important;
        border-radius: 9px !important;
        font-size: 13px !important;
    }

    .yf-service strong {
        font-size: 9px !important;
    }

    .yf-service small {
        font-size: 7px !important;
    }

    .yf-buy-panel {
        margin: 0 -12px;
        padding: 13px 12px 17px !important;
        border-radius: 0 !important;
        border-right: 0 !important;
        border-left: 0 !important;
        background: #fff !important;
    }

    .yf-selection-summary {
        margin-bottom: 11px;
    }

    .yf-buy-label {
        font-size: 11px !important;
    }

    .yf-options {
        gap: 7px !important;
    }

    .yf-options span {
        min-width: 48px;
        min-height: 43px;
        padding: 9px 12px !important;
        border-radius: 11px !important;
        font-size: 11px !important;
    }

    .yf-qty-row {
        min-height: 46px;
    }

    .yf-qty button,
    .yf-qty input {
        width: 42px !important;
        height: 42px !important;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-mobile-bar {
        min-height: 68px;
        grid-template-columns: minmax(96px, .8fr) 50px minmax(132px, 1.15fr);
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-mobile-bar .yf-btn-cart {
        width: 50px;
        min-width: 50px;
        height: 50px;
        min-height: 50px;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-mobile-bar .yf-btn-buy {
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 7px 10px;
    }

    .yf-mobile-price strong {
        font-size: 12px !important;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-description,
    .yf-detail[data-product-experience="4.9.0"] .yf-product-answer,
    .yf-detail[data-product-experience="4.9.0"] .yf-product-guidance,
    .yf-detail[data-product-experience="4.9.0"] .yf-related {
        margin-right: 10px;
        margin-left: 10px;
    }
}

@media (max-width: 370px) {
    .yf-detail[data-product-experience="4.9.0"] .yf-mobile-bar {
        grid-template-columns: 86px 46px minmax(118px, 1fr);
        gap: 6px;
        padding-right: 7px;
        padding-left: 7px;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-mobile-bar .yf-btn-cart {
        width: 46px;
        min-width: 46px;
    }

    .yf-mobile-action-copy small {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yf-variant-sheet-panel {
        animation: none;
        transform: none;
    }
}

/* V4.9.0 usability pass — teks, varian, dan CTA mobile lebih mudah disentuh. */
.yf-selection-summary-copy small {
    font-size: 10px;
}

.yf-selection-summary-copy strong {
    font-size: 13px;
}

.yf-selection-summary-stock {
    font-size: 10px;
}

.yf-variant-sheet-head strong {
    font-size: 16px;
}

.yf-variant-sheet-head small {
    font-size: 11px;
    line-height: 1.4;
}

.yf-variant-sheet-confirm {
    min-height: 54px;
    font-size: 14px;
}

.yf-mobile-action-copy strong {
    font-size: 13px;
}

.yf-mobile-action-copy small,
.yf-mobile-price-hint {
    font-size: 9.5px;
}

@media (max-width: 767.98px) {
    .yf-gallery-swipe-hint {
        padding: 6px 9px;
        font-size: 9px;
    }

    .yf-product-kicker {
        font-size: 10px !important;
    }

    .yf-product-name {
        font-size: 21px !important;
        line-height: 1.34 !important;
    }

    .yf-product-meta span {
        font-size: 10px !important;
    }

    .yf-price-note {
        font-size: 11px !important;
        line-height: 1.45;
    }

    .yf-stock strong {
        font-size: 12px !important;
    }

    .yf-stock span {
        font-size: 10.5px !important;
        line-height: 1.4;
    }

    .yf-service strong {
        font-size: 11.5px !important;
    }

    .yf-service small {
        font-size: 9.5px !important;
        line-height: 1.35;
    }

    .yf-buy-label {
        font-size: 13px !important;
    }

    .yf-options span {
        min-height: 48px;
        font-size: 13px !important;
    }

    .yf-mobile-price strong {
        font-size: 14px !important;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-mobile-bar {
        min-height: 74px;
        grid-template-columns: minmax(104px, .82fr) 54px minmax(144px, 1.18fr);
        gap: 9px;
        padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-mobile-bar .yf-btn-cart {
        width: 54px;
        min-width: 54px;
        height: 54px;
        min-height: 54px;
    }

    .yf-detail[data-product-experience="4.9.0"] .yf-mobile-bar .yf-btn-buy {
        min-height: 54px;
    }

    .yf-variant-sheet-content {
        padding: 14px;
    }
}