/* Dipindah dari shop/partials/sg-product-page-alignment.php (blok #1, id=sg-product-page-alignment) */
/* ── Canvas (wins over legacy product-premium / bayargg blocks) ── */
html[data-theme="light"] body {
    background: var(--sg-surface-page) !important;
    background-image: none !important;
    color: #0f172a !important;
}
html:not([data-theme="light"]) body {
    background: var(--sg-surface-page) !important;
    background-image: none !important;
    color: #f1f6ff !important;
}

/* ── Layout shell ── */
.product-topbar-in,
main.wrap,
.checkout-direct .tg-embed-body .tg-main {
    max-width: 1120px !important;
}
main.wrap {
    margin: 0 auto !important;
    padding: 16px 16px 48px !important;
    position: relative;
    z-index: 1;
}
@media (min-width: 761px) {
    main.wrap {
        padding: 20px 24px 64px !important;
    }
    .product-topbar-in {
        padding-inline: 24px !important;
    }
}
@media (max-width: 760px) {
    main.wrap {
        padding: 12px 14px calc(20px + var(--sg-bottom-nav-clearance, 0px)) !important;
    }
    body.sg-page-product main.wrap {
        padding: 12px 14px 16px 14px !important;
    }
    body.has-mobile-checkout-cta main.wrap {
        padding-bottom: calc(16px + var(--sg-sticky-cta-clearance, 80px)) !important;
    }
    body.sg-page-product.has-mobile-checkout-cta main.wrap {
        padding-bottom: calc(16px + var(--sg-sticky-cta-clearance, 80px)) !important;
    }
}

/* ── Product topbar / headline ── */
.product-topbar {
    background: transparent !important;
    padding: 18px 0 8px !important;
}
@media (max-width: 760px) {
    body.sg-page-product .product-topbar {
        padding-top: 18px !important;
    }
}
html[data-theme="light"] .product-headline-text small {
    color: var(--sg-brand) !important;
    opacity: 1 !important;
}
html:not([data-theme="light"]) .product-headline-text small {
    color: var(--sg-brand-muted) !important;
    opacity: 1 !important;
}
html[data-theme="light"] .product-headline-text h1,
html[data-theme="light"] .product-headline-fallback {
    color: #0f172a !important;
}
html:not([data-theme="light"]) .product-headline-text h1,
html:not([data-theme="light"]) .product-headline-fallback {
    color: #f1f6ff !important;
}
html[data-theme="light"] .product-headline-meta {
    color: var(--sg-text-secondary) !important;
}
html:not([data-theme="light"]) .product-headline-meta {
    color: var(--sg-text-muted) !important;
}
.product-headline-meta i {
    color: var(--sg-brand) !important;
}
html:not([data-theme="light"]) .product-headline-meta i {
    color: var(--sg-brand-muted) !important;
}

/* ── Cards & panels ── */
.card {
    background: var(--sg-surface-card) !important;
    border: 1px solid var(--sg-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--sg-shadow-soft) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
}
html:not([data-theme="light"]) .card {
    box-shadow: var(--sg-shadow-brand) !important;
}
.section-title h2 {
    font-size: 1.12rem !important;
    letter-spacing: -.02em !important;
    color: inherit !important;
}
html[data-theme="light"] .section-title h2 { color: #0f172a !important; }
html:not([data-theme="light"]) .section-title h2 { color: #f1f6ff !important; }
.section-title p,
.detail-hero p,
.meta,
.empty {
    color: var(--sg-text-secondary) !important;
}
html:not([data-theme="light"]) .section-title p,
html:not([data-theme="light"]) .detail-hero p,
html:not([data-theme="light"]) .meta,
html:not([data-theme="light"]) .empty {
    color: var(--sg-text-muted) !important;
}

/* ── Detail rows ── */
.detail-row {
    background: var(--sg-surface-subtle) !important;
    border: 1px solid var(--sg-border) !important;
    border-radius: 12px !important;
}
.detail-row span:first-child {
    color: var(--sg-text-muted) !important;
    font-weight: 600 !important;
}
.detail-row span:last-child {
    color: inherit !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .detail-row span:last-child { color: #0f172a !important; }
html:not([data-theme="light"]) .detail-row span:last-child { color: #f1f6ff !important; }

/* ── Buttons & price ── */
.btn {
    background: linear-gradient(135deg, var(--sg-brand-dark), var(--sg-brand)) !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: var(--sg-shadow-brand) !important;
    font-weight: 800 !important;
    min-height: 44px !important;
}
.btn-soft {
    background: var(--sg-surface-tint) !important;
    color: var(--sg-brand) !important;
    border: 1px solid var(--sg-border) !important;
    box-shadow: none !important;
}
html:not([data-theme="light"]) .btn-soft {
    color: var(--sg-brand-muted) !important;
}
.price {
    color: var(--sg-brand) !important;
    font-weight: 800 !important;
}
html:not([data-theme="light"]) .price {
    color: var(--sg-brand-muted) !important;
}

/* ── Checkout embed cards ── */
html[data-theme="light"] .checkout-direct .tg-embed-body .tg-main > .tg-card {
    background: var(--sg-surface-card) !important;
    border-color: var(--sg-border) !important;
    box-shadow: var(--sg-shadow-soft) !important;
}
html:not([data-theme="light"]) .checkout-direct .tg-embed-body .tg-main > .tg-card {
    background: var(--sg-surface-elevated) !important;
    border-color: var(--sg-border) !important;
    box-shadow: var(--sg-shadow-brand) !important;
}

/* ── Footer clearance (mobile bottom nav / product side rail) ── */
@media (max-width: 760px) {
    .sg-footer,
    .tg-footer {
        padding-bottom: calc(20px + var(--sg-bottom-nav-clearance, 0px)) !important;
    }
    body.sg-page-product .sg-footer,
    body.sg-page-product .tg-footer {
        padding-bottom: 20px !important;
    }
    body.has-mobile-checkout-cta .sg-footer,
    body.has-mobile-checkout-cta .tg-footer {
        padding-bottom: calc(20px + var(--sg-sticky-cta-clearance, 80px)) !important;
    }
    body.sg-page-product.has-mobile-checkout-cta .sg-footer,
    body.sg-page-product.has-mobile-checkout-cta .tg-footer {
        padding-bottom: calc(20px + var(--sg-sticky-cta-clearance, 80px)) !important;
    }
}

/* Checkout embed — pager & product tiles clear sticky CTA */
@media (max-width: 760px) {
    .checkout-direct .tg-embed-body .tg-main,
    .checkout-shell .checkout-direct .tg-embed-body .tg-main {
        padding-bottom: calc(16px + var(--sg-sticky-cta-clearance, 80px)) !important;
    }
    .checkout-direct .tg-embed-body .tg-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .checkout-direct .tg-embed-body .tg-item .i-left {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
    }
    .checkout-direct .tg-embed-body .tg-item .i-name {
        width: 100% !important;
        max-width: 100% !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        font-size: .78rem !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }
    body.has-mobile-checkout-cta .checkout-direct .tg-embed-body .tg-card-products {
        padding-bottom: calc(20px + var(--sg-sticky-cta-clearance, 80px)) !important;
    }
}
@media (min-width: 761px) {
    .checkout-direct .tg-embed-body .tg-main,
    main.wrap:has(.checkout-shell) {
        padding-bottom: 28px !important;
    }
    .checkout-direct .tg-embed-body .tg-card-products {
        padding-bottom: 20px !important;
    }
}

/* ── Detail grid spacing ── */
.detail {
    gap: 16px !important;
    align-items: start !important;
}
@media (min-width: 761px) {
    .detail {
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr) !important;
    }
}

/* ── Empty / not-found product state ── */
.card.empty {
    text-align: center !important;
    padding: 32px 22px !important;
    max-width: 560px;
    margin-inline: auto;
}
.card.empty::before {
    content: '';
    display: block;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--sg-surface-tint);
    border: 1px solid var(--sg-border);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m0 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2m1-4a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0z'/%3E%3C/svg%3E") center / 22px no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1m0 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2m1-4a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0z'/%3E%3C/svg%3E") center / 22px no-repeat;
}
html[data-theme="light"] .card.empty {
    color: var(--sg-text-secondary) !important;
    font-size: .95rem;
    line-height: 1.6;
}
html:not([data-theme="light"]) .card.empty {
    color: var(--sg-text-muted) !important;
    font-size: .95rem;
    line-height: 1.6;
}

/* ── Product topbar — wins over legacy monochrome text stacks ── */
html[data-theme="light"] .product-topbar .crumb,
html[data-theme="light"] .product-topbar .crumb a,
html[data-theme="light"] .product-topbar .crumb-current {
    color: var(--sg-text-muted) !important;
}
html[data-theme="light"] .product-topbar .crumb a:hover {
    color: var(--sg-brand) !important;
    opacity: 1 !important;
}
html:not([data-theme="light"]) .product-topbar .crumb,
html:not([data-theme="light"]) .product-topbar .crumb a {
    color: var(--sg-text-muted) !important;
}
html:not([data-theme="light"]) .product-topbar .crumb a:hover {
    color: var(--sg-brand-muted) !important;
}

/* Checkout embed — product instruction wins over legacy black info box */
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    max-height: none;
}
html[data-theme="light"] .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product,
html[data-theme="light"] .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-kv-row,
html[data-theme="light"] .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-desc-block {
    background: var(--sg-surface-card) !important;
    border-color: #e2e9f5 !important;
    color: var(--sg-text-secondary) !important;
    box-shadow: none !important;
}
html:not([data-theme="light"]) .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product,
html:not([data-theme="light"]) .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-kv-row,
html:not([data-theme="light"]) .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-desc-block {
    background: var(--sg-surface-elevated) !important;
    border-color: rgba(26, 134, 255, .16) !important;
    color: var(--sg-text-muted) !important;
    box-shadow: none !important;
}
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product h3,
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product h4,
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-product-name,
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-kv-row dd,
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-desc,
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product li {
    color: inherit !important;
}
html[data-theme="light"] .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product h3,
html[data-theme="light"] .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product h4,
html[data-theme="light"] .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-product-name,
html[data-theme="light"] .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-kv-row dd {
    color: #0f172a !important;
}
html:not([data-theme="light"]) .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product h3,
html:not([data-theme="light"]) .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product h4,
html:not([data-theme="light"]) .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-product-name,
html:not([data-theme="light"]) .checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-kv-row dd {
    color: #f1f6ff !important;
}
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-kv-row {
    background: var(--sg-surface-subtle) !important;
}
.checkout-direct .tg-embed-body #productInstruction.tg-info-box--product .tg-info-section + .tg-info-divider {
    margin-top: 10px !important;
}