* {
    box-sizing: border-box;
}

:root {
    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --accent: #86d23f;
    --danger: #dc2626;
    --text: #273142;
    --muted: #687386;
    --line: #e6ebf3;
    --soft: #f5f7fb;
    --white: #ffffff;
    --shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--white);
    color: var(--text);
    font-size: 15px;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.container {
    width: min(100% - 32px, 1120px);
    margin: 0 auto;
}

.site-header {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}

.header-inner {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.logo-image {
    display: block;
    width: auto;
    height: 44px;
    max-width: 190px;
    object-fit: contain;
}

.logo-text {
    display: inline-block;
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-nav a {
    padding: 10px 14px;
    border-radius: 999px;
    color: #344054;
    font-weight: 600;
}

.header-nav a:hover,
.header-nav a.active {
    background: #edf4ff;
    color: var(--primary);
}

.mobile-actions {
    display: none;
    align-items: center;
    gap: 14px;
}

.icon-button {
    position: relative;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
}

.icon-button em {
    position: absolute;
    top: 4px;
    right: 3px;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--danger);
    color: var(--white);
    font-size: 11px;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.main-content {
    min-height: 60vh;
}

.home-banner {
    background: linear-gradient(135deg, #dff4ff 0%, #f6fff1 48%, #e9f1ff 100%);
    border-bottom: 1px solid var(--line);
}

.home-banner-inner {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: center;
    padding: 30px 0 48px;
}

.banner-logo {
    width: 170px;
    max-height: 92px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.14));
}

.banner-copy {
    max-width: 540px;
}

.banner-label {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 12px;
    font-weight: 800;
}

.banner-copy h1 {
    margin: 0 0 8px;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.1;
}

.banner-copy p {
    margin: 0;
    color: #4b5563;
    font-size: 17px;
    line-height: 1.6;
}

.home-search-wrap {
    position: relative;
    z-index: 2;
    margin-top: -34px;
    margin-bottom: 24px;
}

.home-search {
    max-width: 760px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid #dfe5ee;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.13);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.home-search input {
    flex: 1;
    width: 100%;
    height: 56px;
    border: 0;
    outline: none;
    padding: 0 20px;
    font-size: 16px;
    color: var(--text);
}

.home-search button {
    width: 62px;
    height: 56px;
    border: 0;
    background: transparent;
    color: #111827;
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
}

.category-section {
    margin-bottom: 26px;
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.category-chip {
    min-width: 86px;
    text-align: center;
    padding: 11px 16px;
    border-radius: 7px;
    background: #e9eef6;
    color: #2f3847;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.category-chip:hover,
.category-chip.active {
    background: var(--accent);
    color: var(--white);
}

.store-info-simple {
    margin-bottom: 26px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.store-info-simple strong {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
}

.store-info-simple p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.store-info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.store-info-list span {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 12px;
    color: #475569;
    font-size: 13px;
}

.product-section {
    margin-bottom: 34px;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.section-heading h2 {
    margin: 0;
    font-size: 24px;
}

.section-heading a,
.reset-link,
.back-link {
    color: var(--primary);
    font-weight: 700;
}

.product-grid-simple {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.product-card-simple {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border: 1px solid #e9edf3;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.product-image-link {
    display: block;
    background: #f3f6fb;
}

.product-image {
    display: block;
    width: 100%;
    aspect-ratio: 1.55 / 1;
    object-fit: cover;
}

.product-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 13px;
    border-bottom: 1px dashed #cbd5e1;
}

.product-card-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    padding: 12px 14px 14px;
}

.product-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.mini-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    background: #ddf7c9;
    color: #357414;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 800;
}

.mini-badge-muted {
    background: #eef2f7;
    color: #475569;
}

.product-name {
    display: -webkit-box;
    min-height: calc(1.34em * 2);
    margin: 0;
    color: #2b3443;
    font-size: 17px;
    line-height: 1.34;
    font-weight: 500;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-price {
    margin-top: 0;
    color: #e11d63;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.15;
}

.product-stock-note {
    margin-top: 10px;
    color: var(--muted);
    font-size: 14px;
}

.product-detail-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}

.page-top-simple {
    padding: 26px 0 12px;
    text-align: center;
}

.page-top-simple h1 {
    margin: 0 0 8px;
    font-size: 32px;
}

.page-top-simple p {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.listing-search-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.listing-search {
    width: min(100%, 760px);
    box-shadow: var(--shadow);
}

.product-detail-simple {
    display: grid;
    grid-template-columns: minmax(260px, 440px) 1fr;
    gap: 26px;
    align-items: start;
    padding: 28px 0 20px;
}

.detail-image-wrap {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.detail-image {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
}

.detail-image-empty {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.detail-content {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: var(--shadow);
}

.detail-content h1 {
    margin: 14px 0 10px;
    font-size: clamp(26px, 4vw, 38px);
}

.detail-content p {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.variant-section,
.back-section {
    margin-bottom: 24px;
}

.variant-form {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.variant-list-simple {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
}

.variant-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
}

.variant-option:hover {
    border-color: var(--primary);
}

.variant-option.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.variant-option span {
    display: grid;
    gap: 4px;
}

.variant-option small {
    color: var(--muted);
}

.variant-option b {
    color: #e11d63;
}

.qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.qty-row input {
    width: 110px;
}

.empty-box {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    color: var(--muted);
}

.empty-box strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text);
    font-size: 18px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: var(--white);
    padding: 11px 16px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
}

.btn:hover {
    background: var(--primary-dark);
}

.btn-light {
    background: var(--white);
    color: var(--primary);
}

.btn-light:hover {
    background: #edf4ff;
}

.btn-danger {
    background: var(--danger);
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-full {
    width: 100%;
}

.card,
.checkout-box {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow);
}

.hero {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    padding: 28px;
    border-radius: 18px;
    margin: 24px 0;
}

.hero h1 {
    margin: 0 0 8px;
}

.hero p {
    margin: 0 0 18px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.product-title {
    font-size: 20px;
    font-weight: 700;
}

.product-desc {
    color: var(--muted);
    line-height: 1.5;
}

.price {
    font-weight: 700;
    color: #16a34a;
}

.stock {
    color: var(--muted);
    font-size: 14px;
}

.alert-success,
.alert-error {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 15px;
}

.alert-success {
    background: #dcfce7;
    color: #166534;
}

.alert-error {
    background: #fee2e2;
    color: #991b1b;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
}

th,
td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

th {
    background: #f8fafc;
}

.form-group {
    margin-bottom: 16px;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="file"],
textarea,
select {
    width: 100%;
    max-width: 620px;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font: inherit;
}

textarea {
    min-height: 110px;
}

.radio-card,
.payment-card {
    border: 1px solid var(--line);
    background: var(--white);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
}

.checkout-grid,
.invoice-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 20px;
    align-items: start;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-total {
    font-size: 18px;
    font-weight: 700;
}

.form-note {
    color: var(--muted);
    font-size: 13px;
}

.invoice-header {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: var(--white);
    padding: 28px;
    border-radius: 18px;
    margin-bottom: 22px;
}

.invoice-header h1 {
    margin: 0 0 8px;
}

.invoice-number {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.badge-pending {
    background: #fef3c7;
    color: #92400e;
}

.badge-paid {
    background: #dcfce7;
    color: #166534;
}

.badge-cancelled,
.badge-expired {
    background: #fee2e2;
    color: #991b1b;
}

.store-logo-preview {
    width: 180px;
    max-height: 120px;
    object-fit: contain;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    padding: 8px;
}

.store-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.site-footer {
    margin-top: 34px;
    padding: 26px 0;
    text-align: center;
    color: #667085;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.footer-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    justify-content: center;
    font-size: 14px;
}

@media (max-width: 1024px) {
    .product-grid-simple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .container {
        width: min(100% - 28px, 1120px);
    }

    .header-inner {
        min-height: 92px;
    }

    .header-nav:not(.admin-nav) {
        display: none;
    }

    .mobile-actions {
        display: inline-flex;
    }

    .logo-image {
        height: 46px;
        max-width: 210px;
    }

    .logo-text {
        font-size: 20px;
    }

    .home-banner-inner {
        min-height: 190px;
        flex-direction: column;
        gap: 12px;
        padding: 24px 0 46px;
    }

    .banner-logo {
        width: 150px;
        max-height: 78px;
    }

    .banner-copy h1 {
        font-size: 30px;
    }

    .banner-copy p {
        font-size: 15px;
    }

    .home-search-wrap {
        margin-top: -29px;
        margin-bottom: 22px;
    }

    .home-search input {
        height: 58px;
        font-size: 16px;
        padding-left: 18px;
    }

    .home-search button {
        height: 58px;
        width: 58px;
        font-size: 32px;
    }

    .category-chips {
        gap: 10px;
    }

    .category-chip {
        min-width: 86px;
        padding: 11px 13px;
        font-size: 14px;
    }

    .store-info-simple {
        align-items: stretch;
        flex-direction: column;
    }

    .store-info-list {
        justify-content: flex-start;
    }

    .product-grid-simple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .product-card-body {
        gap: 4px;
        padding: 10px 12px 12px;
    }

    .product-name {
        min-height: calc(1.34em * 2);
        font-size: 16px;
        line-height: 1.34;
    }

    .product-price {
        font-size: 18px;
    }

    .product-detail-link,
    .product-badges {
        display: none;
    }

    .section-heading h2 {
        font-size: 22px;
    }

    .page-top-simple h1 {
        font-size: 28px;
    }

    .product-detail-simple {
        grid-template-columns: 1fr;
        padding-top: 20px;
    }

    .detail-content {
        padding: 18px;
    }

    .variant-option {
        grid-template-columns: auto 1fr;
    }

    .variant-option b {
        grid-column: 2;
    }

    .grid,
    .checkout-grid,
    .invoice-grid,
    .store-info-grid {
        grid-template-columns: 1fr;
    }

    .summary-row {
        flex-direction: column;
        gap: 4px;
    }

    .hero {
        padding: 22px;
    }
}

@media (max-width: 420px) {
    .container {
        width: min(100% - 24px, 1120px);
    }

    .logo-image {
        max-width: 184px;
    }

    .icon-button {
        width: 40px;
        height: 40px;
        font-size: 28px;
    }

    .home-banner-inner {
        min-height: 178px;
    }

    .banner-copy h1 {
        font-size: 27px;
    }

    .category-chip {
        min-width: 76px;
        padding: 10px 11px;
        font-size: 13px;
    }

    .product-grid-simple {
        gap: 14px;
    }

    .product-name {
        font-size: 16px;
    }

    .product-price {
        font-size: 19px;
    }
}

/* Desktop + mobile clean storefront fix */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
}

.header-inner {
    min-height: 70px;
}

.logo-image {
    height: 42px;
    max-width: 210px;
}

.icon-button {
    font-size: 0;
}

.bag-icon,
.hamburger-icon,
.search-icon {
    display: inline-block;
    position: relative;
}

.bag-icon {
    width: 29px;
    height: 27px;
    border: 3px solid #111827;
    border-top: 0;
    border-radius: 0 0 3px 3px;
}

.bag-icon::before {
    content: "";
    position: absolute;
    left: 6px;
    top: -13px;
    width: 13px;
    height: 14px;
    border: 3px solid #111827;
    border-bottom: 0;
    border-radius: 11px 11px 0 0;
}

.hamburger-icon {
    width: 34px;
    height: 24px;
    border-top: 4px solid #111827;
    border-bottom: 4px solid #111827;
}

.hamburger-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 34px;
    border-top: 4px solid #111827;
}

.search-icon {
    width: 23px;
    height: 23px;
    border: 3px solid #111827;
    border-radius: 50%;
}

.search-icon::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: -6px;
    width: 10px;
    border-top: 3px solid #111827;
    transform: rotate(45deg);
    transform-origin: left center;
}

.home-cover {
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
    padding: 22px 0 0;
}

.home-cover-banner {
    width: min(100% - 32px, 1120px);
    height: 245px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #dfe9f7;
    box-shadow: 0 12px 34px rgba(37, 99, 235, 0.13);
    background:
        radial-gradient(circle at 82% 24%, rgba(255, 255, 255, 0.78) 0 0, transparent 145px),
        radial-gradient(circle at 12% 80%, rgba(134, 210, 63, 0.38) 0 0, transparent 185px),
        linear-gradient(135deg, #1673ff 0%, #2e8dff 46%, #86d23f 100%);
}

.home-cover-banner::before,
.home-cover-banner::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.home-cover-banner::before {
    width: 360px;
    height: 360px;
    right: -110px;
    top: -120px;
}

.home-cover-banner::after {
    width: 270px;
    height: 270px;
    left: -95px;
    bottom: -120px;
}

.home-cover-copy {
    position: absolute;
    z-index: 2;
    left: 46px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 520px;
    color: #ffffff;
}

.home-cover-copy span {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
}

.home-cover-copy h1 {
    margin: 0 0 10px;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -0.8px;
}

.home-cover-copy p {
    margin: 0;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
}

.home-cover-art {
    position: absolute;
    z-index: 2;
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    width: 330px;
    height: 170px;
}

.digital-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.94);
    color: #1f2937;
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.22);
}

.digital-card-main {
    right: 45px;
    top: 18px;
    width: 210px;
    height: 126px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
}

.digital-card-main b {
    font-size: 30px;
    line-height: 1;
    color: #2563eb;
}

.digital-card-main small {
    margin-top: 7px;
    color: #64748b;
    font-size: 17px;
    font-weight: 700;
}

.digital-card-small {
    right: 0;
    top: 0;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    color: #2563eb;
    font-size: 32px;
    font-weight: 800;
}

.digital-card-small.alt {
    left: 18px;
    bottom: 0;
    top: auto;
    color: #86d23f;
}

.home-search-wrap {
    margin-top: -32px;
    margin-bottom: 24px;
}

.home-search {
    width: min(100%, 760px);
    height: 60px;
    border-radius: 999px;
    border: 1px solid #dfe5ee;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
}

.home-search input[type="text"] {
    max-width: none;
    height: 58px;
    border: 0;
    border-radius: 999px 0 0 999px;
    padding: 0 24px;
    outline: none;
    font-size: 16px;
    background: transparent;
}

.home-search button {
    width: 74px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #edf1f7;
}

.category-section {
    margin-top: 2px;
    margin-bottom: 30px;
}

.product-section {
    margin-top: 0;
    margin-bottom: 38px;
}

.product-grid-simple {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-items: start;
}

.product-card-simple {
    max-width: 310px;
}

@media (max-width: 768px) {
    .header-inner {
        min-height: 82px;
    }

    .logo-image {
        height: 42px;
        max-width: 185px;
    }

    .home-cover {
        padding-top: 0;
        background: #ffffff;
    }

    .home-cover-banner {
        width: 100%;
        height: 230px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .home-cover-copy {
        left: 22px;
        right: 22px;
        max-width: 360px;
    }

    .home-cover-copy span {
        margin-bottom: 7px;
        font-size: 10px;
        letter-spacing: 1.4px;
    }

    .home-cover-copy h1 {
        font-size: 31px;
        margin-bottom: 8px;
    }

    .home-cover-copy p {
        max-width: 270px;
        font-size: 14px;
        line-height: 1.45;
    }

    .home-cover-art {
        right: -26px;
        width: 190px;
        height: 134px;
        opacity: 0.86;
    }

    .digital-card-main {
        right: 36px;
        top: 28px;
        width: 128px;
        height: 82px;
        border-radius: 14px;
        padding: 14px;
    }

    .digital-card-main b {
        font-size: 20px;
    }

    .digital-card-main small {
        font-size: 12px;
    }

    .digital-card-small {
        width: 44px;
        height: 44px;
        font-size: 24px;
        border-radius: 13px;
    }

    .home-search-wrap {
        margin-top: -30px;
        margin-bottom: 23px;
    }

    .home-search {
        height: 60px;
    }

    .home-search input[type="text"] {
        height: 58px;
        padding-left: 20px;
    }

    .home-search button {
        height: 58px;
        width: 64px;
    }

    .category-section {
        margin-bottom: 28px;
    }

    

    .product-card-simple {
        max-width: none;
    }
}

@media (max-width: 420px) {
    .home-cover-banner {
        height: 205px;
    }

    .home-cover-copy h1 {
        font-size: 27px;
    }

    .home-cover-copy p {
        max-width: 238px;
        font-size: 13px;
    }

    .home-cover-art {
        right: -54px;
        opacity: 0.72;
    }
}

/* Fix banner home: pakai banner asli jika tersedia, tanpa dekorasi kartu melayang */
.home-cover {
    background: #ffffff;
    padding: 20px 0 0;
}

.home-cover-banner {
    width: min(100% - 32px, 1120px);
    height: auto;
    min-height: 0;
    margin: 0 auto;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    overflow: hidden;
    background: transparent;
}

.home-cover-banner::before,
.home-cover-banner::after {
    display: none;
}

.home-cover-image-banner {
    aspect-ratio: 1080 / 310;
    border-radius: 6px;
    background: #f1f5f9;
}

.home-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-cover-placeholder {
    min-height: 210px;
    border-radius: 6px;
    background: linear-gradient(135deg, #e9f5ff 0%, #f7fff0 100%);
    border: 1px solid #e6ebf3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 36px 20px;
}

.home-cover-copy {
    position: static;
    transform: none;
    max-width: 680px;
    color: #273142;
}

.home-cover-copy span {
    color: #2563eb;
}

.home-cover-copy h1 {
    color: #273142;
}

.home-cover-copy p {
    color: #4b5563;
}

.home-cover-art,
.digital-card {
    display: none;
}

.home-search-wrap {
    margin-top: 18px;
    margin-bottom: 24px;
}

.store-banner-preview {
    display: block;
    width: min(100%, 520px);
    max-height: 180px;
    object-fit: cover;
    border: 1px solid #e6ebf3;
    border-radius: 12px;
    background: #f8fafc;
}

@media (max-width: 768px) {
    .home-cover {
        padding-top: 0;
    }

    .home-cover-banner {
        width: 100%;
    }

    .home-cover-image-banner {
        aspect-ratio: 16 / 7;
        border-radius: 0;
    }

    .home-cover-placeholder {
        min-height: 175px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        padding: 30px 20px;
    }

    .home-cover-copy h1 {
        font-size: 28px;
    }

    .home-cover-copy p {
        max-width: none;
        font-size: 14px;
    }

    .home-search-wrap {
        margin-top: 14px;
    }
}

/* Home focus: banner-search-category layout like Tokohayday */
.home-cover {
    background: #ffffff;
    padding: 0;
}

.home-cover-banner {
    margin-bottom: 0;
}

.home-cover-image-banner {
    border-radius: 0;
    box-shadow: none;
}

.home-banner-image {
    display: block;
}

.home-search-wrap {
    position: relative;
    z-index: 5;
    margin-top: -34px;
    margin-bottom: 22px;
}

.home-search {
    width: min(100%, 760px);
    min-height: 62px;
    border-radius: 999px;
    border: 1px solid #dfe5ee;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.home-search input[type="text"],
.home-search input {
    height: 60px;
    font-size: 16px;
    color: #273142;
    padding-left: 24px;
}

.home-search button {
    width: 74px;
    height: 60px;
    border-left: 1px solid #edf1f7;
}

.category-section {
    margin-top: 0;
    margin-bottom: 30px;
}

.category-chips {
    gap: 10px 10px;
}

.category-chip {
    min-width: 86px;
    padding: 11px 16px;
    border-radius: 7px;
    background: #e9eef6;
    color: #2f3847;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}

.category-chip.active,
.category-chip:hover {
    background: #86d23f;
    color: #ffffff;
}

.product-section:first-of-type {
    margin-top: 0;
}

@media (max-width: 768px) {
    .home-cover-image-banner {
        aspect-ratio: 16 / 7;
    }

    .home-search-wrap {
        width: min(100% - 56px, 640px);
        margin-top: -31px;
        margin-bottom: 23px;
    }

    .home-search {
        min-height: 62px;
    }

    .home-search input[type="text"],
    .home-search input {
        height: 60px;
        padding-left: 20px;
        font-size: 16px;
    }

    .home-search button {
        width: 66px;
        height: 60px;
    }

    .category-section {
        width: min(100% - 32px, 640px);
        margin-bottom: 30px;
    }

    .category-chips {
        justify-content: center;
        gap: 10px;
    }

    .category-chip {
        min-width: 74px;
        padding: 10px 14px;
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .home-cover-image-banner {
        aspect-ratio: 16 / 7;
    }

    .home-search-wrap {
        width: calc(100% - 46px);
        margin-top: -30px;
        margin-bottom: 22px;
    }

    .home-search {
        min-height: 60px;
    }

    .home-search input[type="text"],
    .home-search input {
        height: 58px;
        padding-left: 18px;
        font-size: 15px;
    }

    .home-search button {
        width: 62px;
        height: 58px;
    }

    .category-section {
        width: calc(100% - 28px);
    }

    .category-chip {
        min-width: 68px;
        padding: 10px 12px;
        font-size: 13px;
    }
}

/* Home icon refinement: ikon keranjang dan search dibuat lebih kecil seperti Tokohayday */
.mobile-actions {
    gap: 17px;
}

.icon-button {
    width: 38px;
    height: 38px;
    padding: 0;
}

.bag-icon {
    width: 24px;
    height: 27px;
    border: 0;
    border-radius: 2px 2px 1px 1px;
    background: linear-gradient(to bottom, transparent 0 8px, #111827 8px 100%);
}

.bag-icon::before {
    left: 5px;
    top: 0;
    width: 14px;
    height: 14px;
    border: 2px solid #111827;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    background: transparent;
}

.search-icon {
    width: 20px;
    height: 20px;
    border: 2px solid #111827;
    border-radius: 50%;
}

.search-icon::after {
    right: -7px;
    bottom: -5px;
    width: 9px;
    border-top: 2px solid #111827;
    transform: rotate(45deg);
    transform-origin: left center;
}

.home-search button {
    width: 60px;
}

@media (max-width: 768px) {
    .mobile-actions {
        gap: 16px;
    }

    .icon-button {
        width: 37px;
        height: 37px;
    }

    .bag-icon {
        width: 23px;
        height: 26px;
    }

    .bag-icon::before {
        left: 5px;
        width: 13px;
        height: 13px;
    }

    .home-search button {
        width: 56px;
    }

    .search-icon {
        width: 19px;
        height: 19px;
    }

    .search-icon::after {
        right: -7px;
        bottom: -5px;
        width: 9px;
    }
}

@media (max-width: 420px) {
    .icon-button {
        width: 36px;
        height: 36px;
    }

    .bag-icon {
        width: 22px;
        height: 25px;
        background: linear-gradient(to bottom, transparent 0 8px, #111827 8px 100%);
    }

    .bag-icon::before {
        left: 5px;
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .home-search button {
        width: 54px;
    }

    .search-icon {
        width: 18px;
        height: 18px;
    }

    .search-icon::after {
        right: -6px;
        bottom: -5px;
        width: 8px;
    }
}

/* Font Awesome local icons: keranjang, search, dan menu hamburger */
.nav-fa-icon,
.search-fa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    line-height: 1;
}

.nav-fa-cart {
    font-size: 31px;
}

.nav-fa-menu {
    font-size: 32px;
}

.search-fa-icon {
    font-size: 23px;
    font-weight: 900;
}

.mobile-actions .icon-button {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.home-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    background: #ffffff;
    border-left: 1px solid #eef2f7;
}

/* Matikan icon CSS manual lama setelah Font Awesome aktif */
.bag-icon,
.hamburger-icon,
.search-icon,
.bag-icon::before,
.hamburger-icon::before,
.search-icon::after {
    display: none !important;
}

@media (max-width: 768px) {
    .nav-fa-cart {
        font-size: 30px;
    }

    .nav-fa-menu {
        font-size: 31px;
    }

    .search-fa-icon {
        font-size: 21px;
    }
}

@media (max-width: 420px) {
    .nav-fa-cart {
        font-size: 29px;
    }

    .nav-fa-menu {
        font-size: 30px;
    }

    .search-fa-icon {
        font-size: 20px;
    }
}

/* Detail produk simple seperti tokohayday.com */
.product-detail-tokohayday {
    padding-top: 36px;
}

.detail-image-frame {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
}

.detail-main-image {
    display: block;
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: 10px;
}

.detail-main-image-empty {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f6fb;
    color: var(--muted);
}

.detail-title-block {
    padding: 28px 0 18px;
}

.detail-category-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 16px;
    border-radius: 999px;
    background: #ddf7c9;
    color: #357414;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 700;
    text-transform: lowercase;
}

.detail-title-block h1 {
    margin: 0;
    color: #242b37;
    font-size: clamp(32px, 5vw, 46px);
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0.2px;
}

.detail-title-block p {
    max-width: 760px;
    margin: 16px 0 0;
    color: #737b88;
    font-size: 18px;
    line-height: 1.75;
}

.detail-order-section {
    margin-top: 4px;
    margin-bottom: 42px;
}

.detail-order-section h2,
.detail-description-heading h2 {
    margin: 0 0 22px;
    color: #242b37;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.2;
    font-weight: 500;
}

.detail-order-form {
    margin: 0;
}

.detail-variant-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.detail-variant-pill {
    display: block;
    cursor: pointer;
}

.detail-variant-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.detail-variant-card {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #d7dce5;
    border-radius: 7px;
    background: #f7f8fa;
    color: #5f6673;
    padding: 12px 14px;
    text-align: center;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.detail-variant-card strong {
    font-size: 18px;
    font-weight: 500;
}

.detail-variant-card small {
    font-size: 13px;
    color: inherit;
    opacity: 0.82;
}

.detail-variant-pill input:checked + .detail-variant-card {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(134, 210, 63, 0.24);
}

.detail-variant-pill:not(.is-disabled):hover .detail-variant-card {
    border-color: var(--accent);
}

.detail-variant-pill.is-disabled {
    cursor: not-allowed;
}

.detail-variant-pill.is-disabled .detail-variant-card {
    opacity: 0.55;
    background: #f1f2f4;
}

.detail-price-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.detail-price-box small {
    display: block;
    margin-bottom: 5px;
    color: #8a93a3;
    font-size: 14px;
}

.detail-price-box strong {
    display: block;
    color: #222831;
    font-size: clamp(32px, 5vw, 40px);
    line-height: 1.1;
    font-weight: 600;
}

.detail-stock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ecfdf3;
    color: #16803f;
    padding: 8px 13px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.detail-stock-badge.is-empty {
    background: #fef2f2;
    color: #dc2626;
}

.detail-info-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 10px;
    color: #666f7d;
    font-size: 18px;
    line-height: 1.4;
}

.detail-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.detail-info-list i {
    margin-top: 2px;
    color: #35b464;
    font-size: 18px;
}

.btn-order-simple {
    width: 100%;
    min-height: 58px;
    border-radius: 7px;
    background: var(--accent);
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
}

.btn-order-simple:hover {
    background: #75c531;
}

.btn-order-simple:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.detail-description-section {
    margin-top: 18px;
}

.detail-description-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 12px;
    margin-bottom: 18px;
}

.detail-description-heading h2 {
    margin-bottom: 0;
}

.detail-share-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid #d9dee8;
    border-radius: 7px;
    background: #ffffff;
    color: #4b5563;
    font-size: 17px;
    cursor: pointer;
}

.detail-share-button i {
    color: #111827;
}

.detail-share-button.is-copied {
    border-color: #35b464;
    color: #16803f;
}

.detail-description-content {
    color: #5f6673;
    font-size: 17px;
    line-height: 1.8;
}

.detail-back-section {
    margin-top: 30px;
}

.detail-back-section .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.detail-empty-box {
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .product-detail-tokohayday {
        padding-top: 38px;
    }

    .detail-image-frame {
        border-radius: 8px;
    }

    .detail-main-image {
        max-height: none;
        border-radius: 8px;
        aspect-ratio: 1.56 / 1;
        object-fit: cover;
    }

    .detail-main-image-empty {
        height: 230px;
    }

    .detail-title-block {
        padding: 24px 0 18px;
    }

    .detail-title-block h1 {
        font-size: 34px;
    }

    .detail-title-block p {
        font-size: 17px;
        line-height: 1.7;
    }

    .detail-order-section {
        margin-bottom: 38px;
    }

    .detail-order-section h2,
    .detail-description-heading h2 {
        font-size: 32px;
    }

    .detail-variant-pills {
        gap: 14px;
    }

    .detail-variant-card {
        min-height: 66px;
        padding: 11px 12px;
    }

    .detail-price-box strong {
        font-size: 34px;
    }

    .detail-info-list {
        font-size: 17px;
    }
}

@media (max-width: 420px) {
    .product-detail-tokohayday {
        padding-top: 36px;
    }

    .detail-title-block h1 {
        font-size: 31px;
    }

    .detail-title-block p {
        font-size: 16px;
    }

    .detail-order-section h2,
    .detail-description-heading h2 {
        font-size: 28px;
    }

    .detail-variant-pills {
        gap: 12px;
    }

    .detail-variant-card strong {
        font-size: 17px;
    }

    .detail-price-box {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-price-box strong {
        font-size: 32px;
    }

    .detail-info-list {
        font-size: 16px;
    }

    .detail-share-button {
        min-height: 44px;
        padding: 0 14px;
        font-size: 16px;
    }
}

/* Detail produk v2 - desktop dan mobile lebih mirip tokohayday.com */

.category-breadcrumb-section {
    padding-top: 18px;
}

.product-breadcrumb {
    margin: 0 0 16px;
    color: #64748b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.product-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.product-breadcrumb li + li::before {
    /* Separator breadcrumb memakai karakter teks agar stabil di Firefox/semua browser. */
    content: '›';
    display: inline-flex;
    align-items: center;
    color: #94a3b8;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.product-breadcrumb a,
.product-breadcrumb [aria-current="page"] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    border: 1px solid #e6efd9;
    border-radius: 999px;
    background: #f8fbf4;
    padding: 6px 10px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.product-breadcrumb a {
    color: #497d14;
    font-weight: 700;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.product-breadcrumb a:hover {
    border-color: rgba(134, 210, 63, 0.6);
    background: #eef9e6;
    color: #365f0f;
}

.product-breadcrumb i {
    flex: 0 0 auto;
    color: #7acb2f;
    font-size: 12px;
}

.product-breadcrumb [aria-current="page"] {
    max-width: 360px;
    overflow: hidden;
    border-color: #e5eaf2;
    background: #ffffff;
    color: #334155;
    font-weight: 600;
}

.product-breadcrumb [aria-current="page"] span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-product-page {
    padding-top: 22px;
}

.detail-product-page > .product-breadcrumb {
    margin-bottom: 14px;
}

.detail-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(360px, 1fr);
    gap: 34px;
    align-items: start;
}

.detail-gallery-panel {
    background: #ffffff;
    border-radius: 7px;
    overflow: visible;
}

/* Gambar detail produk dibuat no-crop agar foto utama, galeri, dan varian tidak blur/terpotong. */
.detail-product-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 430px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 7px;
}

.detail-product-image-empty {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f6fb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.detail-buy-panel {
    padding-top: 4px;
}

.detail-category-mini {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 12px;
    border-radius: 999px;
    background: #ddf7c9;
    color: #3d7d1d;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 700;
    text-transform: lowercase;
}

.detail-product-title {
    margin: 0 0 20px;
    color: #202938;
    font-size: 25px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.detail-alert {
    margin-bottom: 16px;
}

.detail-order-form-simple {
    margin: 0;
}

.detail-variant-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}

.detail-variant-button {
    display: block;
    cursor: pointer;
}

.detail-variant-button input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.detail-variant-button span {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #f4f4f4;
    color: #616161;
    padding: 0 14px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.detail-variant-button input:checked + span {
    background: #86d23f;
    border-color: #86d23f;
    color: #ffffff;
}

.detail-variant-button:not(.is-out-of-stock):hover span {
    border-color: #86d23f;
}

.detail-variant-button.is-out-of-stock {
    cursor: pointer;
}

.detail-variant-button.is-out-of-stock span {
    color: #9ca3af;
    background: #f3f4f6;
}

.detail-variant-button.is-out-of-stock input:checked + span {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.detail-price-row strong {
    color: #222222;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 600;
}

.detail-stock-text {
    color: #6b7280;
    font-size: 14px;
}

.detail-stock-text.is-empty {
    color: #dc2626;
}

.detail-check-list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 9px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.45;
}

.detail-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.detail-check-list i {
    margin-top: 2px;
    color: #24a45b;
    font-size: 15px;
}

.detail-order-button {
    width: 100%;
    min-height: 50px;
    border-radius: 5px;
    background: #86d23f;
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.6px;
}

.detail-order-button:hover {
    background: #77c832;
}

.detail-order-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #9ca3af;
}

.detail-description-section-simple {
    margin-top: 32px;
}

.detail-description-heading-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e6ebf3;
    padding-bottom: 11px;
    margin-bottom: 16px;
}

.detail-description-heading-simple h2 {
    margin: 0;
    color: #202938;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
}

.detail-share-button-simple {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d8dee8;
    border-radius: 4px;
    background: #ffffff;
    color: #4b5563;
    padding: 0 14px;
    font-size: 14px;
    cursor: pointer;
}

.detail-share-button-simple i {
    color: #111827;
    font-size: 14px;
}

.detail-share-button-simple.is-copied {
    border-color: #24a45b;
    color: #16803f;
}

.detail-description-content-simple {
    max-width: 980px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.75;
}

.detail-back-section-simple {
    margin-top: 24px;
}

.detail-back-section-simple .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

@media (max-width: 1024px) {
    .detail-product-layout {
        grid-template-columns: minmax(0, 440px) minmax(320px, 1fr);
        gap: 24px;
    }

    .detail-product-title {
        font-size: 24px;
    }

    .detail-price-row strong {
        font-size: 26px;
    }
}

@media (max-width: 768px) {

    .category-breadcrumb-section {
        padding-top: 14px;
    }

    .product-breadcrumb {
        margin-bottom: 12px;
        font-size: 13px;
    }

    .product-breadcrumb ol {
        gap: 6px;
    }

    .product-breadcrumb li {
        gap: 6px;
    }

    .product-breadcrumb a,
    .product-breadcrumb [aria-current="page"] {
        min-height: 30px;
        gap: 6px;
        padding: 5px 8px;
    }

    .product-breadcrumb [aria-current="page"] {
        max-width: 220px;
    }

    .detail-product-page {
        padding-top: 16px;
    }

    .detail-product-page > .product-breadcrumb {
        margin-bottom: 12px;
    }

    .detail-product-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .detail-buy-panel {
        padding-top: 0;
    }

    .detail-product-title {
        margin-bottom: 18px;
        font-size: 27px;
        line-height: 1.28;
        font-weight: 500;
    }

    .detail-variant-grid {
        gap: 10px;
        margin-bottom: 22px;
    }

    .detail-variant-button span {
        min-height: 50px;
        font-size: 16px;
    }

    .detail-price-row strong {
        font-size: 28px;
    }

    .detail-check-list {
        font-size: 15px;
    }

    .detail-description-section-simple {
        margin-top: 34px;
    }

    .detail-description-heading-simple h2 {
        font-size: 24px;
    }

    .detail-description-content-simple {
        font-size: 15px;
    }
}

@media (max-width: 420px) {
    .detail-product-page {
        padding-top: 12px;
    }

    .detail-product-title {
        font-size: 25px;
    }

    .detail-variant-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail-variant-button span {
        min-height: 48px;
        padding: 0 9px;
        font-size: 14px;
    }

    .detail-price-row {
        gap: 9px;
    }

    .detail-price-row strong {
        font-size: 26px;
    }

    .detail-order-button {
        min-height: 50px;
        font-size: 15px;
    }

    .detail-description-heading-simple h2 {
        font-size: 22px;
    }

    .detail-share-button-simple {
        min-height: 36px;
        padding: 0 12px;
        font-size: 13px;
    }

    .detail-description-heading-simple {
        gap: 10px;
    }

    .detail-share-trigger {
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }
}

/* Popup keranjang dan lightbox produk */
body.modal-open {
    overflow: hidden;
}

.detail-lightbox-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 220px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: #f8fafc;
    cursor: zoom-in;
    overflow: hidden;
}

.detail-zoom-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    color: #2f2f2f;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16);
}

.cart-popup-overlay,
.product-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.58);
}

.cart-popup-overlay[hidden],
.product-lightbox-overlay[hidden] {
    display: none;
}

.cart-popup-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.cart-popup-dialog {
    width: min(680px, 100%);
    max-height: min(720px, calc(100dvh - 36px));
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: auto;
}

.cart-popup-header {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 16px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 28px;
}

.cart-popup-header h2 {
    margin: 0;
    color: #303030;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
}

.cart-popup-close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #777777;
    font-size: 22px;
    cursor: pointer;
}

.cart-popup-body {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 26px 28px 24px;
}

.cart-popup-image {
    width: 78px;
    height: 66px;
    border-radius: 4px;
    object-fit: cover;
    background: #eef2f7;
}

.cart-popup-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cart-popup-info strong {
    color: #242424;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
}

.cart-popup-info span {
    color: #626262;
    font-size: 14px;
    line-height: 1.35;
}

.cart-popup-info b {
    color: #d63763;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 500;
}

.cart-popup-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cart-popup-qty {
    display: inline-grid;
    grid-template-columns: 46px 54px 46px;
    min-height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: #eeeeee;
}

.cart-popup-qty button,
.cart-popup-qty span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #343434;
    font-size: 16px;
    line-height: 1;
}

.cart-popup-qty button {
    background: #eeeeee;
    cursor: pointer;
}

.cart-popup-qty button:disabled {
    color: #aaaaaa;
    cursor: not-allowed;
}

.cart-popup-qty span {
    background: #f8f8f8;
}

.cart-popup-remove {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #d83f54;
    font-size: 20px;
    cursor: pointer;
}

.cart-popup-message {
    margin: 0 28px 18px;
    border-radius: 6px;
    background: #fff7ed;
    color: #9a3412;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
}

.cart-popup-message.is-error {
    background: #fef2f2;
    color: #b91c1c;
}

.cart-popup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-shrink: 0;
    gap: 16px;
    padding: 0 28px 28px;
}

.cart-popup-secondary,
.cart-popup-primary {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.2px;
    text-align: center;
}

.cart-popup-secondary {
    border: 1px solid #86d23f;
    background: #ffffff;
    color: #78c339;
    cursor: pointer;
}

.cart-popup-primary {
    border: 1px solid #86d23f;
    background: #86d23f;
    color: #ffffff;
    text-decoration: none;
}

.product-lightbox-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}

.product-lightbox-image {
    display: block;
    max-width: min(920px, 100%);
    max-height: 82vh;
    border: 4px solid #ffffff;
    border-radius: 2px;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.product-lightbox-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #202020;
    font-size: 20px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .detail-zoom-icon {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .cart-popup-overlay {
        align-items: center;
        padding: 16px;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .cart-popup-dialog {
        max-height: calc(100dvh - 24px);
    }

    .cart-popup-header {
        min-height: 70px;
        padding: 0 28px;
    }

    .cart-popup-header h2 {
        font-size: 26px;
    }

    .cart-popup-body {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 12px;
        padding: 24px 28px 20px;
    }

    .cart-popup-image {
        width: 88px;
        height: 74px;
    }

    .cart-popup-info strong {
        font-size: 17px;
    }

    .cart-popup-info span {
        font-size: 15px;
    }

    .cart-popup-info b {
        font-size: 18px;
    }

    .cart-popup-controls {
        grid-column: 2;
        justify-content: flex-end;
        margin-top: 2px;
    }

    .cart-popup-actions {
        gap: 16px;
        padding: 0 28px 28px;
    }

    .cart-popup-secondary,
    .cart-popup-primary {
        min-height: 52px;
        font-size: 15px;
    }

    .product-lightbox-overlay {
        padding: 18px;
    }
}

@media (max-width: 420px) {
    .cart-popup-dialog {
        width: 100%;
    }

    .cart-popup-header {
        min-height: 64px;
        padding: 0 22px;
    }

    .cart-popup-header h2 {
        font-size: 22px;
    }

    .cart-popup-body {
        grid-template-columns: 78px minmax(0, 1fr);
        padding: 22px 22px 18px;
    }

    .cart-popup-image {
        width: 78px;
        height: 66px;
    }

    .cart-popup-info strong {
        font-size: 15px;
    }

    .cart-popup-info span {
        font-size: 14px;
    }

    .cart-popup-info b {
        font-size: 17px;
    }

    .cart-popup-qty {
        grid-template-columns: 42px 50px 42px;
        min-height: 42px;
    }

    .cart-popup-remove {
        font-size: 19px;
    }

    .cart-popup-message {
        margin: 0 22px 16px;
    }

    .cart-popup-actions {
        gap: 12px;
        padding: 0 22px 22px;
    }

    .cart-popup-secondary,
    .cart-popup-primary {
        min-height: 50px;
        font-size: 14px;
    }
}


/* Cart icon + multi-item popup refinement */
.header-nav .header-cart-icon {
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111827;
    background: transparent;
    border-radius: 999px;
    text-decoration: none;
}

.header-nav .header-cart-icon:hover,
.header-nav .header-cart-icon.active {
    background: #edf4ff;
    color: #111827;
}

.header-cart-icon .fa-bag-shopping {
    font-size: 24px;
    line-height: 1;
}

.header-cart-icon em,
.icon-button em[data-cart-count-badge] {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff5a1f;
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.header-cart-icon em[hidden],
.icon-button em[data-cart-count-badge][hidden] {
    display: none;
}

.cart-popup-scrollarea {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: auto;
}

.cart-popup-scrollarea::-webkit-scrollbar {
    width: 8px;
}

.cart-popup-scrollarea::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.28);
}

.cart-popup-list {
    min-height: 0;
    max-height: none;
    flex: none;
    overflow: visible;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 22px 28px 14px;
}

.cart-popup-list[hidden],
.cart-popup-list.is-hidden {
    display: none !important;
}

.cart-popup-item {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 12px rgba(15, 23, 42, 0.06);
}

.cart-popup-item-image {
    width: 78px;
    height: 66px;
    border-radius: 4px;
    object-fit: cover;
    background: #eef2f7;
}

.cart-popup-item-image[hidden] {
    display: none;
}

.cart-popup-item-info {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cart-popup-item-info strong {
    color: #242424;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 600;
}

.cart-popup-item-info span {
    color: #626262;
    font-size: 14px;
    line-height: 1.35;
}

.cart-popup-item-info b {
    color: #d63763;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 500;
}

.cart-popup-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 14px;
    margin: 0 28px 18px;
    padding: 13px 0 0;
    border-top: 1px solid #eeeeee;
    color: #303030;
    font-size: 15px;
}

.cart-popup-summary strong {
    color: #d63763;
    font-size: 18px;
    font-weight: 600;
}


.cart-popup-empty[hidden],
.cart-popup-empty.is-hidden,
.cart-popup-summary[hidden],
.cart-popup-summary.is-hidden,
.cart-popup-message[hidden],
.cart-popup-message.is-hidden {
    display: none !important;
}

.cart-popup-empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 30px 28px 20px;
    color: #667085;
    text-align: center;
}

.cart-popup-empty i {
    color: #111827;
    font-size: 34px;
}

.cart-popup-empty strong {
    color: #303030;
    font-size: 17px;
    font-weight: 600;
}

.cart-popup-empty span {
    font-size: 14px;
}

.cart-popup-primary.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .cart-popup-overlay {
        align-items: center;
        padding: 16px 10px;
    }

    .cart-popup-dialog {
        height: calc(100dvh - 32px);
        max-height: calc(100dvh - 32px);
    }

    .cart-popup-scrollarea {
        overscroll-behavior: contain;
    }

    .cart-popup-list {
        max-height: none;
        padding: 22px 22px 12px;
    }

    .cart-popup-item {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 12px;
        padding: 10px;
    }

    .cart-popup-item-image {
        width: 82px;
        height: 70px;
    }

    .cart-popup-item-info strong {
        font-size: 16px;
    }

    .cart-popup-item-info span {
        font-size: 14px;
    }

    .cart-popup-item-info b {
        font-size: 17px;
    }

    .cart-popup-item .cart-popup-controls {
        grid-column: 2;
        justify-content: flex-end;
        margin-top: 2px;
    }

    .cart-popup-summary {
        margin: 0 22px 16px;
    }
}

@media (max-width: 420px) {
    .cart-popup-overlay {
        padding: 10px 8px;
    }

    .cart-popup-dialog {
        height: calc(100dvh - 20px);
        max-height: calc(100dvh - 20px);
    }

    .cart-popup-list {
        padding: 20px 18px 12px;
    }

    .cart-popup-item {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .cart-popup-item-image {
        width: 76px;
        height: 64px;
    }

    .cart-popup-summary {
        margin: 0 18px 16px;
    }
}

/* Fitur diskon varian produk */
.variant-discount-admin-box {
    max-width: 760px;
    margin: 22px 0;
    padding: 18px;
    border: 1px solid #e3e9f2;
    border-radius: 14px;
    background: #f8fafc;
}

.variant-discount-admin-box h2 {
    margin: 0 0 6px;
    color: #202938;
    font-size: 20px;
}

.variant-discount-admin-box p {
    margin: 0 0 16px;
    color: #667085;
    font-size: 14px;
}

.admin-form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

[data-discount-field][hidden],
[data-temporary-discount-field][hidden] {
    display: none !important;
}

.detail-old-price {
    color: #8a8f98;
    font-size: 17px;
    text-decoration: line-through;
}

.detail-discount-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border-radius: 5px;
    background: #d93650;
    color: #ffffff;
    padding: 0 8px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.detail-old-price[hidden],
.detail-discount-badge[hidden],
.detail-discount-timer[hidden] {
    display: none !important;
}

.detail-discount-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: -4px 0 15px;
    border-radius: 999px;
    background: #fff6e5;
    color: #9a5b00;
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 600;
}

.detail-discount-timer i {
    color: #f59e0b;
}

.detail-discount-timer strong {
    color: #7c3e00;
    font-weight: 800;
}

.product-price-wrap {
    display: grid;
    gap: 2px;
    margin-top: 0;
    min-height: 45px;
    align-content: end;
}

.product-discount-line {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 0;
    line-height: 1.1;
}

.product-discount-line span {
    color: #8a8f98;
    font-size: 13px;
    text-decoration: line-through;
}

.product-discount-line b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    border-radius: 4px;
    background: #d93650;
    color: #ffffff;
    padding: 0 6px;
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 768px) {
    .admin-form-grid-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .variant-discount-admin-box {
        padding: 16px;
    }

    .detail-old-price {
        font-size: 16px;
    }

    .detail-discount-badge {
        min-height: 25px;
        font-size: 13px;
    }

    .detail-discount-timer {
        margin-top: -2px;
        font-size: 12px;
    }
}

.cart-popup-discount-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: #8a8f98;
    font-size: 12px;
}

.cart-popup-discount-line span {
    text-decoration: line-through;
}

.cart-popup-discount-line em {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    border-radius: 4px;
    background: #d93650;
    color: #ffffff;
    padding: 0 5px;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
}

/* Coupon admin and checkout */
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.coupon-admin-card select,
.coupon-admin-card input,
.coupon-admin-card textarea {
    max-width: none;
}

.coupon-admin-section {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    margin: 16px 0;
    background: #f8fafc;
}

.coupon-admin-section h3 {
    margin: 0 0 6px;
    font-size: 18px;
}

.coupon-product-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.coupon-product-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
}

.coupon-product-list input {
    width: auto;
}

.coupon-ajax-picker {
    margin-top: 12px;
}

.coupon-picker-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 50px;
    border: 1px solid #dce3ee;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.coupon-picker-search-field:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.coupon-picker-search-field i {
    position: absolute;
    left: 15px;
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
}

.coupon-ajax-picker input[type="search"] {
    width: 100%;
    max-width: none;
    min-height: 48px;
    padding: 11px 14px 11px 42px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #1f2937;
    font: inherit;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.coupon-ajax-picker input[type="search"]::placeholder {
    color: #98a2b3;
}

.coupon-ajax-picker input[type="search"]::-webkit-search-decoration,
.coupon-ajax-picker input[type="search"]::-webkit-search-cancel-button,
.coupon-ajax-picker input[type="search"]::-webkit-search-results-button,
.coupon-ajax-picker input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.coupon-picker-status {
    margin: 8px 0 10px;
}

.coupon-picker-results {
    display: grid;
    gap: 10px;
    margin: 12px 0 14px;
}

.coupon-picker-item {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}

.coupon-picker-item img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 12px;
    background: #eef2f7;
}

.coupon-picker-item-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.coupon-picker-item-body strong,
.coupon-picker-item-body span,
.coupon-picker-item-body em {
    overflow-wrap: anywhere;
}

.coupon-picker-item-body strong {
    color: var(--text);
    font-size: 14px;
}

.coupon-picker-item-body span {
    color: var(--muted);
    font-size: 13px;
}

.coupon-picker-item-body em {
    color: var(--muted);
    font-style: normal;
    font-size: 12px;
}

.coupon-picker-selected-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
}

.coupon-picker-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 36px;
    margin-top: 10px;
}

.coupon-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 7px 9px 7px 11px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
}

.coupon-picker-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coupon-picker-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 999px;
    background: #dbeafe;
    color: #1e40af;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.coupon-picker-chip button:hover {
    background: #bfdbfe;
}

.coupon-apply-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    max-width: 620px;
}

.coupon-apply-row input {
    max-width: none;
}

.coupon-apply-button {
    min-width: 128px;
    white-space: nowrap;
}

.coupon-apply-message {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.coupon-apply-message.success {
    background: #dcfce7;
    color: #166534;
}

.coupon-apply-message.error {
    background: #fee2e2;
    color: #991b1b;
}

.coupon-remove-button {
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--danger);
    font-weight: 700;
    cursor: pointer;
}

.summary-coupon-row {
    color: #dc2626;
    font-weight: 700;
}

@media (max-width: 768px) {
    .form-grid-2,
    .coupon-product-list,
    .coupon-apply-row {
        grid-template-columns: 1fr;
    }

    .coupon-picker-item {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .coupon-picker-item img {
        width: 46px;
        height: 46px;
    }

    .coupon-picker-item .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .coupon-picker-selected-head {
        align-items: stretch;
        flex-direction: column;
    }

    .coupon-picker-chip {
        width: 100%;
        justify-content: space-between;
        border-radius: 14px;
    }

    .coupon-apply-button {
        width: 100%;
    }
}


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Checkout simple Tokohayday-style */
.checkout-page-simple {
    width: min(760px, calc(100% - 28px));
    margin: 0 auto 54px;
}

.checkout-back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 6px 0 12px;
    border-radius: 50%;
    color: #1f2937;
    text-decoration: none;
    font-size: 20px;
}

.checkout-alert {
    margin-bottom: 14px;
}

.checkout-form-simple {
    display: grid;
    gap: 18px;
}

.checkout-panel {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.checkout-summary-panel {
    margin-top: 4px;
}

.checkout-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}

.checkout-section-head h1,
.checkout-section-head h2 {
    margin: 0;
    color: #1f2937;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.checkout-section-head h1 {
    text-transform: uppercase;
    font-size: 20px;
}

.checkout-section-head span {
    color: #6b7280;
    font-size: 13px;
}

.checkout-order-items {
    display: grid;
    gap: 12px;
}

.checkout-order-item {
    display: grid;
    grid-template-columns: 94px 1fr;
    gap: 14px;
    align-items: center;
    border-radius: 14px;
    background: #ffffff;
    padding: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.checkout-order-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 94px;
    height: 76px;
    overflow: hidden;
    border-radius: 10px;
    background: #f3f4f6;
    color: #94a3b8;
}

.checkout-order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-order-info {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.checkout-order-info strong {
    color: #1f2937;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

.checkout-order-info span {
    color: #6b7280;
    font-size: 14px;
}

.checkout-order-info b {
    color: #d93668;
    font-size: 17px;
    font-weight: 700;
}

.checkout-total-box {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eeeeee;
}

.checkout-total-box > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #4b5563;
    font-size: 15px;
}

.checkout-total-box strong {
    color: #1f2937;
    font-weight: 800;
}

.checkout-total-box .summary-coupon-row strong,
.checkout-total-box .summary-coupon-row span {
    color: #dc2626;
}

.checkout-grand-total {
    border-top: 1px dashed #d1d5db;
    padding-top: 12px;
}

.checkout-grand-total span,
.checkout-grand-total strong {
    color: #111827;
    font-size: 20px;
    font-weight: 800;
}

.checkout-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.checkout-form-grid .form-group {
    margin-bottom: 0;
}

.checkout-form-grid label,
.checkout-coupon-group label {
    display: inline-block;
    margin-bottom: 8px;
    color: #374151;
    font-weight: 600;
}

.checkout-form-grid label span {
    color: #8a8f98;
    font-weight: 400;
}

.checkout-form-simple input[type="text"],
.checkout-form-simple input[type="tel"],
.checkout-form-simple input[type="email"] {
    width: 100%;
    max-width: none;
}

.checkout-payment-logo-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.checkout-payment-logo-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 86px;
    width: 86px;
    height: 42px;
    min-height: 42px;
    border: 1px solid #d7dbe1;
    border-radius: 4px;
    background: #ffffff;
    padding: 4px 7px;
    text-align: center;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.checkout-payment-logo-card:hover,
.checkout-payment-logo-card.is-selected {
    border-color: #2684ff;
    box-shadow: 0 0 0 1px rgba(38, 132, 255, .18);
}

.checkout-payment-logo-card:active {
    transform: scale(.98);
}

.checkout-payment-logo-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.payment-logo-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.payment-logo-box img {
    max-width: 66px;
    max-height: 24px;
    object-fit: contain;
}

.payment-logo-box i {
    color: #1f2937;
    font-size: 22px;
}

.payment-logo-box b {
    color: #1f2937;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .02em;
}

.payment-logo-box i + b {
    margin-left: 7px;
}

.payment-logo-name,
.checkout-payment-logo-card small {
    display: none;
}

.checkout-coupon-row {
    max-width: none;
    grid-template-columns: 1fr 145px;
}

.checkout-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: 12px;
    background: #86d33b;
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 12px 22px rgba(134, 211, 59, .25);
}

.checkout-submit-button:hover {
    background: #76c72d;
}

.checkout-submit-button i {
    font-size: 19px;
}

.payment-logo-admin-preview,
.payment-logo-admin-table {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    min-height: 52px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #ffffff;
    padding: 7px;
    margin-bottom: 8px;
}

.payment-logo-admin-preview img,
.payment-logo-admin-table img {
    max-width: 120px;
    max-height: 52px;
    object-fit: contain;
}

.payment-logo-admin-table {
    min-width: 76px;
    min-height: 42px;
    margin-bottom: 0;
}

.payment-logo-admin-table img {
    max-width: 88px;
    max-height: 36px;
}

.admin-checkline {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 4px 0 10px;
    color: #4b5563;
    font-weight: 600;
}

.admin-checkline input {
    width: auto;
}

@media (max-width: 768px) {
    .checkout-page-simple {
        width: 100%;
        margin-bottom: 36px;
        padding: 0;
    }

    .checkout-back-link {
        margin-left: 18px;
    }

    .checkout-form-simple {
        gap: 14px;
    }

    .checkout-panel {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        padding: 17px 18px;
        box-shadow: none;
    }

    .checkout-section-head h1,
    .checkout-section-head h2 {
        font-size: 19px;
    }

    .checkout-order-item {
        grid-template-columns: 96px 1fr;
        padding: 8px;
    }

    .checkout-order-thumb {
        width: 96px;
        height: 82px;
    }

    .checkout-order-info strong {
        font-size: 17px;
    }

    .checkout-form-grid,
    .checkout-coupon-row {
        grid-template-columns: 1fr;
    }

    .checkout-payment-logo-grid {
        gap: 7px;
    }

    .checkout-payment-logo-card {
        flex: 0 0 calc((100% - 21px) / 4);
        width: calc((100% - 21px) / 4);
        height: 42px;
        min-height: 42px;
        padding: 4px 6px;
    }

    .payment-logo-box img {
        max-width: 62px;
        max-height: 23px;
    }

    .checkout-submit-button {
        position: sticky;
        bottom: 0;
        z-index: 20;
        border-radius: 0;
        min-height: 62px;
    }
}


@media (max-width: 360px) {
    .checkout-payment-logo-grid {
        gap: 6px;
    }

    .checkout-payment-logo-card {
        flex-basis: calc((100% - 18px) / 4);
        width: calc((100% - 18px) / 4);
        height: 40px;
        min-height: 40px;
        padding: 4px 5px;
    }

    .payment-logo-box img {
        max-width: 56px;
        max-height: 22px;
    }
}

/* Admin area redesign */
body.admin-body {
    background: #f4f6fb;
    color: #111827;
}

body.admin-menu-open {
    overflow: hidden;
}

.admin-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    background: #f4f6fb;
}

.admin-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-right: 1px solid #e8edf5;
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.04);
    z-index: 70;
}

.admin-sidebar-brand {
    min-height: 70px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #eef2f7;
}

.admin-brand-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-weight: 900;
    color: #1d4ed8;
}

.admin-brand-link img {
    width: auto;
    height: 34px;
    max-width: 168px;
    object-fit: contain;
}

.admin-brand-link span {
    display: inline-block;
    font-size: 20px;
    white-space: nowrap;
}

.admin-sidebar-close {
    display: none;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f1f5f9;
    color: #1f2937;
    cursor: pointer;
}

.admin-sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    padding: 12px 12px calc(32px + env(safe-area-inset-bottom));
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-width: auto;
    scrollbar-color: rgba(17, 24, 39, 0.45) rgba(226, 232, 240, 0.9);
    scrollbar-gutter: stable;
}

.admin-sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

.admin-sidebar-menu::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.9);
    border-radius: 999px;
}

.admin-sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(17, 24, 39, 0.42);
    border-radius: 999px;
}

.admin-sidebar-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(17, 24, 39, 0.62);
}

.admin-sidebar-brand {
    flex: 0 0 auto;
}

body.admin-menu-open {
    position: fixed;
    width: 100%;
    inset-inline: 0;
    overflow: hidden;
}

body.admin-menu-open .admin-sidebar,
body.admin-menu-open .admin-sidebar-menu {
    touch-action: pan-y;
}

.admin-menu-group + .admin-menu-group {
    margin-top: 8px;
}

.admin-menu-group {
    border-radius: 14px;
}

.admin-menu-label {
    width: 100%;
    min-height: 38px;
    padding: 9px 11px;
    border: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #667085;
    background: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .045em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
}

.admin-menu-label:hover,
.admin-menu-group.is-open .admin-menu-label {
    background: #f6f8fc;
    color: #1f2937;
}

.admin-menu-label-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-menu-label-meta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.admin-menu-label-meta > i {
    color: #98a2b3;
    font-size: 11px;
    transition: transform .18s ease, color .18s ease;
}

.admin-menu-group.is-open .admin-menu-label-meta > i {
    color: #2563eb;
    transform: rotate(180deg);
}

.admin-menu-group-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

.admin-menu-group-badge-warning {
    color: #92400e;
    background: #fef3c7;
}

.admin-menu-items {
    display: none;
    padding: 4px 0 2px;
}

.admin-menu-group.is-open .admin-menu-items {
    display: block;
}

.admin-menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 39px;
    padding: 8px 10px;
    border-radius: 11px;
    color: #667085;
    font-size: 14px;
    font-weight: 750;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.admin-menu-link i {
    width: 20px;
    text-align: center;
    color: #98a2b3;
    font-size: 15px;
}

.admin-menu-link:hover {
    background: #f2f6ff;
    color: #1d4ed8;
    transform: translateX(2px);
}

.admin-menu-link:hover i,
.admin-menu-link.is-active i {
    color: #2563eb;
}

.admin-menu-link.is-active {
    background: #eef4ff;
    color: #1d4ed8;
    box-shadow: inset 4px 0 0 #2563eb;
}

.admin-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
    z-index: 65;
}

.admin-main-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    min-height: 78px;
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid #e8edf5;
    backdrop-filter: blur(14px);
}

.admin-topbar-left,
.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.admin-topbar-left strong {
    display: block;
    color: #111827;
    font-size: 18px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-topbar-kicker {
    display: block;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 2px;
}

.admin-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid #e5eaf3;
    border-radius: 14px;
    background: #ffffff;
    color: #111827;
    cursor: pointer;
    font-size: 18px;
}

.admin-topbar-link,
.admin-profile-chip {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid #e6ebf3;
    border-radius: 999px;
    background: #ffffff;
    color: #344054;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.admin-topbar-link:hover {
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.admin-profile-chip i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 12px;
}

.admin-content {
    width: min(100% - 40px, 1240px);
    margin: 0 auto;
    padding: 26px 0 46px;
}

.admin-content .hero {
    margin: 0 0 22px;
    padding: 22px 24px;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    color: #111827;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
}

.admin-content .hero h1 {
    margin: 0 0 6px;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -.02em;
}

.admin-content .hero p {
    max-width: 680px;
    margin: 0 0 16px;
    color: #667085;
}

.admin-content .hero .btn {
    margin: 4px 6px 0 0;
}

.admin-content .card,
.admin-dashboard-card {
    border: 1px solid #e8edf5;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.055);
}

.admin-content .card {
    padding: 20px 22px;
}

.admin-content .card h2,
.admin-content .section-title {
    margin-top: 0;
    font-size: 22px;
    letter-spacing: -.015em;
}

.admin-content .btn {
    min-height: 38px;
    padding: 9px 13px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1;
    box-shadow: none;
}

.admin-content .btn-light {
    border: 1px solid #dbe7ff;
    background: #eef4ff;
    color: #1d4ed8;
}

.admin-content .btn-danger {
    background: #ef4444;
    color: #fff;
}

.admin-content .table-wrap {
    border: 1px solid #edf1f7;
    border-radius: 14px;
    background: #fff;
}

.admin-content table {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
}

.admin-content th {
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-content td {
    color: #344054;
    vertical-align: middle;
}

.admin-content tbody tr:hover {
    background: #fbfdff;
}

.admin-content td .btn {
    margin: 2px;
}

.admin-content input[type="text"],
.admin-content input[type="number"],
.admin-content input[type="email"],
.admin-content input[type="file"],
.admin-content textarea,
.admin-content select {
    max-width: 760px;
    min-height: 42px;
    border-color: #dce3ee;
    background: #ffffff;
    border-radius: 12px;
}

.admin-content input:focus,
.admin-content textarea:focus,
.admin-content select:focus {
    outline: none;
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.admin-content .form-group label,
.admin-content label {
    color: #344054;
    font-weight: 800;
}

.admin-content .form-note {
    color: #667085;
}

.admin-content .badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.admin-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
    padding: 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 58%, #86d23f 140%);
    color: #ffffff;
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.22);
}

.admin-welcome-card h1 {
    margin: 4px 0 8px;
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.12;
}

.admin-welcome-card p {
    max-width: 680px;
    margin: 0;
    color: rgba(255, 255, 255, .88);
    line-height: 1.55;
}

.admin-eyebrow {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .72);
}

.admin-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.admin-welcome-actions .btn-light {
    background: rgba(255, 255, 255, .96);
    color: #1d4ed8;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.admin-stat-card {
    display: grid;
    gap: 8px;
    min-height: 142px;
    padding: 18px;
    border: 1px solid #e8edf5;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.admin-stat-card span {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 18px;
}

.admin-stat-card small {
    color: #667085;
    font-weight: 800;
}

.admin-stat-card strong {
    color: #111827;
    font-size: 30px;
    line-height: 1;
}

.admin-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.admin-card-title-row h2 {
    margin: 0 0 4px;
}

.admin-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.admin-quick-link {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid #edf1f7;
    border-radius: 16px;
    background: #fbfdff;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.admin-quick-link i {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 18px;
}

.admin-quick-link span {
    color: #111827;
    font-weight: 900;
}

.admin-quick-link small {
    color: #667085;
    line-height: 1.45;
}

.admin-quick-link:hover {
    border-color: #bfdbfe;
    background: #f8fbff;
    transform: translateY(-2px);
}

.admin-body .site-footer {
    display: none;
}

@media (max-width: 1180px) {
    .admin-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .admin-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .admin-layout {
        display: block;
    }

    .admin-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(86vw, 310px);
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        transform: translateX(-105%);
        transition: transform .22s ease;
        will-change: transform;
        display: flex;
        flex-direction: column;
    }

    .admin-layout.is-sidebar-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-layout.is-sidebar-open .admin-sidebar .admin-sidebar-menu {
        height: calc(100vh - 70px);
        height: calc(100dvh - 70px);
        overflow-y: scroll;
    }

    .admin-sidebar-overlay {
        touch-action: none;
    }

    .admin-sidebar-close,
    .admin-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .admin-topbar {
        padding: 12px 16px;
    }

    .admin-topbar-actions {
        gap: 8px;
    }

    .admin-topbar-link span,
    .admin-profile-chip span,
    .admin-topbar-kicker {
        display: none;
    }

    .admin-content {
        width: min(100% - 24px, 760px);
        padding: 18px 0 34px;
    }

    .admin-welcome-card {
        display: block;
        padding: 22px;
    }

    .admin-welcome-actions {
        justify-content: flex-start;
        margin-top: 16px;
    }

    .admin-stats-grid,
    .admin-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-topbar-left strong {
        max-width: 180px;
        font-size: 16px;
    }

    .admin-content {
        width: 100%;
        padding: 12px 10px 28px;
    }

    .admin-content .hero,
    .admin-content .card,
    .admin-welcome-card {
        border-radius: 16px;
    }

    .admin-content .hero {
        padding: 18px;
    }

    .admin-content .hero h1 {
        font-size: 24px;
    }

    .admin-content .card {
        padding: 16px;
    }

    .admin-stats-grid,
    .admin-quick-grid {
        grid-template-columns: 1fr;
    }

    .admin-stat-card {
        min-height: 116px;
    }

    .admin-content table {
        min-width: 760px;
    }

    .admin-content .btn {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 13px;
    }
}

/* Admin login redesign */
.admin-login-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fb 0%, #eef5ff 50%, #f4fbf4 100%);
    color: #111827;
}

.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
}

.admin-login-shell {
    width: min(100%, 470px);
}

.admin-login-shell-simple {
    display: block;
}

.admin-login-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .10);
    padding: 34px 32px 30px;
}

.admin-login-card-simple {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.admin-login-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 10px 16px;
    border-radius: 18px;
    background: #ffffff;
    color: #1d4ed8;
    font-weight: 900;
}

.admin-login-logo-center {
    align-self: center;
    max-width: 260px;
}

.admin-login-logo img {
    display: block;
    width: auto;
    height: 52px;
    max-width: 230px;
    object-fit: contain;
}

.admin-login-logo span {
    font-size: 22px;
    white-space: nowrap;
}

.admin-login-head-simple {
    text-align: center;
}

.admin-login-head-simple h1 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.admin-login-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.admin-login-alert-error {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #9f1239;
}

.admin-login-alert-success {
    border: 1px solid #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.admin-login-alert i {
    margin-top: 3px;
}

.admin-login-form {
    display: grid;
    gap: 16px;
}

.admin-login-field {
    display: grid;
    gap: 8px;
    color: #344054;
    font-weight: 800;
}

.admin-login-input-wrap {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid #dfe5ee;
    border-radius: 16px;
    background: #ffffff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.admin-login-input-wrap:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 5px rgba(37, 99, 235, .10);
}

.admin-login-input-wrap > i {
    color: #98a2b3;
    font-size: 15px;
}

.admin-login-input-wrap input {
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 52px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font-size: 16px;
}

.admin-login-input-wrap input::placeholder {
    color: #98a2b3;
}

.admin-login-password-toggle {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: #f4f6fb;
    color: #667085;
    cursor: pointer;
}

.admin-login-password-toggle:hover {
    background: #eef4ff;
    color: #2563eb;
}

.admin-login-submit,
.admin-login-back {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 16px;
    font-weight: 800;
    letter-spacing: .02em;
}

.admin-login-submit {
    margin-top: 4px;
    border: 0;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
}

.admin-login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(37, 99, 235, .22);
}

.admin-login-back {
    border: 1px solid #dbe7ff;
    background: #f8fbff;
    color: #1d4ed8;
}

.admin-login-back:hover {
    border-color: #93c5fd;
    background: #eef4ff;
}

@media (max-width: 520px) {
    .admin-login-page {
        align-items: flex-start;
        padding: 18px 12px 24px;
    }

    .admin-login-card {
        border-radius: 22px;
        padding: 24px 20px 22px;
    }

    .admin-login-logo img {
        height: 44px;
        max-width: 200px;
    }

    .admin-login-head-simple h1 {
        font-size: 22px;
    }

    .admin-login-input-wrap,
    .admin-login-submit,
    .admin-login-back {
        min-height: 50px;
        border-radius: 14px;
    }

    .admin-login-input-wrap input {
        height: 48px;
        font-size: 15px;
    }
}


/* Checkout coupon simple Tokohayday-style */
.checkout-coupon-panel-simple {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.checkout-coupon-panel-simple .checkout-coupon-group {
    margin: 0;
}

.checkout-coupon-simple-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 0;
    max-width: none;
    border: 1px solid #d7dbe1;
    border-radius: 6px;
    overflow: hidden;
    background: #ffffff;
}

.checkout-coupon-simple-row input {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 0;
    padding: 0 18px;
    color: #1f2937;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.checkout-coupon-simple-row input::placeholder {
    color: #7b838d;
    opacity: 1;
    letter-spacing: .08em;
}

.checkout-coupon-simple-row .coupon-apply-button {
    width: 100%;
    min-width: 0;
    height: 52px;
    border: 0;
    border-radius: 0;
    background: #77818b;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .06em;
    box-shadow: none;
}

.checkout-coupon-simple-row .coupon-apply-button:hover {
    background: #66717b;
}

.checkout-coupon-panel-simple .coupon-apply-message {
    margin-top: 10px;
}

.checkout-coupon-panel-simple .coupon-remove-button {
    margin-top: 10px;
}

@media (max-width: 768px) {
    .checkout-coupon-panel-simple {
        padding: 14px 18px 4px;
    }

    .checkout-coupon-simple-row {
        grid-template-columns: minmax(0, 1fr) 124px !important;
    }

    .checkout-coupon-simple-row input {
        height: 50px;
        padding: 0 14px;
        font-size: 15px;
    }

    .checkout-coupon-simple-row .coupon-apply-button {
        height: 50px;
        font-size: 14px;
    }
}

@media (max-width: 360px) {
    .checkout-coupon-simple-row {
        grid-template-columns: minmax(0, 1fr) 110px !important;
    }

    .checkout-coupon-simple-row input {
        padding: 0 12px;
        font-size: 13px;
    }

    .checkout-coupon-simple-row .coupon-apply-button {
        font-size: 13px;
    }
}


/* Checkout order refinement: payment -> coupon -> total -> order button */
.checkout-total-summary-simple {
    display: grid;
    gap: 14px;
    padding: 24px 28px;
    border-radius: 14px;
    background: #f1f1f1;
    color: #1f2937;
}

.checkout-total-summary-simple > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.checkout-total-summary-simple span {
    color: #2f3744;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .01em;
}

.checkout-total-summary-simple strong {
    color: #1f2937;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.checkout-total-summary-simple .summary-coupon-row span,
.checkout-total-summary-simple .summary-coupon-row strong {
    color: #2f3744;
}

.checkout-total-summary-simple .checkout-grand-total {
    border-top: 0;
    padding-top: 0;
    margin-top: 4px;
}

.checkout-total-summary-simple .checkout-grand-total span,
.checkout-total-summary-simple .checkout-grand-total strong {
    color: #111827;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.checkout-form-simple .checkout-submit-button {
    position: static !important;
    bottom: auto !important;
    z-index: auto !important;
    border-radius: 12px !important;
    min-height: 58px;
}

.checkout-form-simple .checkout-submit-button i {
    display: inline-flex;
}

@media (max-width: 768px) {
    .checkout-total-summary-simple {
        margin: 0 18px;
        padding: 20px 22px;
        border-radius: 10px;
    }

    .checkout-total-summary-simple span {
        font-size: 17px;
    }

    .checkout-total-summary-simple strong {
        font-size: 18px;
    }

    .checkout-total-summary-simple .checkout-grand-total span,
    .checkout-total-summary-simple .checkout-grand-total strong {
        font-size: 20px;
    }

    .checkout-form-simple .checkout-submit-button {
        width: calc(100% - 36px);
        margin: 0 18px 18px;
    }
}


/* Checkout browser autofill/local form refinement */
.checkout-field-message {
    margin-top: 7px;
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
}

.checkout-payment-logo-card.is-selected {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, .45);
}

.checkout-payment-logo-card.is-selected::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #2563eb;
}

/* Input checkout invalid tidak diberi warna merah otomatis.
   Pesan validasi tetap muncul lewat JavaScript jika data belum sesuai. */
.checkout-form-simple input:invalid,
.checkout-form-simple input:focus:invalid {
    border-color: #d1d5db;
    box-shadow: none;
}


/* Fix tampilan kolom Nomor WhatsApp di checkout */
.checkout-form-simple input[type="tel"],
.checkout-form-simple input[name="customer_whatsapp"],
#checkoutCustomerWhatsapp {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    height: 54px;
    padding: 10px 18px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    font: inherit;
    font-size: 16px;
    line-height: 1.4;
    outline: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

.checkout-form-simple input[type="tel"]::placeholder,
.checkout-form-simple input[name="customer_whatsapp"]::placeholder,
#checkoutCustomerWhatsapp::placeholder {
    color: #8a8f98;
    opacity: 1;
}

.checkout-form-simple input[type="tel"]:focus,
.checkout-form-simple input[name="customer_whatsapp"]:focus,
#checkoutCustomerWhatsapp:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}

/* Fix final kolom Nomor WhatsApp: samakan ukuran dan focus dengan input checkout lain */
.checkout-form-simple #checkoutCustomerWhatsapp,
.checkout-form-simple input[name="customer_whatsapp"],
.checkout-form-simple input[type="tel"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    font: inherit !important;
    font-size: inherit !important;
    line-height: normal !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.checkout-form-simple #checkoutCustomerWhatsapp:focus,
.checkout-form-simple input[name="customer_whatsapp"]:focus,
.checkout-form-simple input[type="tel"]:focus {
    border-color: #d1d5db !important;
    box-shadow: none !important;
    outline: none !important;
}


/* Final focus fix: kolom Nomor WhatsApp dibuat sama persis seperti input text checkout */
body .checkout-page-simple .checkout-form-simple input#checkoutCustomerWhatsapp,
body .checkout-page-simple .checkout-form-simple input[name="customer_whatsapp"] {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    padding: 10px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: inherit !important;
    font: inherit !important;
    font-size: inherit !important;
    line-height: normal !important;
    height: auto !important;
    min-height: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

body .checkout-page-simple .checkout-form-simple input#checkoutCustomerWhatsapp:focus,
body .checkout-page-simple .checkout-form-simple input#checkoutCustomerWhatsapp:focus-visible,
body .checkout-page-simple .checkout-form-simple input[name="customer_whatsapp"]:focus,
body .checkout-page-simple .checkout-form-simple input[name="customer_whatsapp"]:focus-visible {
    border-color: #d1d5db !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Final checkout focus: samakan semua kolom Data Pembeli, termasuk Nomor WhatsApp */
body .checkout-page-simple .checkout-form-grid input[type="text"],
body .checkout-page-simple .checkout-form-grid input[type="email"],
body .checkout-page-simple .checkout-form-grid input[type="number"],
body .checkout-page-simple .checkout-form-grid input#checkoutCustomerWhatsapp,
body .checkout-page-simple .checkout-form-grid input[name="customer_whatsapp"] {
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    outline: 0 !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

body .checkout-page-simple .checkout-form-grid input[type="text"]:focus,
body .checkout-page-simple .checkout-form-grid input[type="email"]:focus,
body .checkout-page-simple .checkout-form-grid input[type="number"]:focus,
body .checkout-page-simple .checkout-form-grid input#checkoutCustomerWhatsapp:focus,
body .checkout-page-simple .checkout-form-grid input[name="customer_whatsapp"]:focus,
body .checkout-page-simple .checkout-form-grid input[type="text"]:focus-visible,
body .checkout-page-simple .checkout-form-grid input[type="email"]:focus-visible,
body .checkout-page-simple .checkout-form-grid input[type="number"]:focus-visible,
body .checkout-page-simple .checkout-form-grid input#checkoutCustomerWhatsapp:focus-visible,
body .checkout-page-simple .checkout-form-grid input[name="customer_whatsapp"]:focus-visible {
    border-color: #9ca3af !important;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, .08) !important;
    outline: 0 !important;
}

/* Product reviews */
.product-review-section {
    margin-top: 28px;
    margin-bottom: 24px;
}

.product-review-header {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.product-review-header h2,
.review-form-panel h3 {
    margin: 0 0 8px;
    color: #1f2937;
    letter-spacing: .02em;
}

.product-review-header p,
.review-form-note {
    margin: 0;
    color: #6b7280;
    line-height: 1.7;
}

.review-summary-card {
    min-width: 210px;
    display: grid;
    gap: 5px;
    justify-items: end;
    align-content: center;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.review-summary-card strong {
    color: #111827;
    font-size: 30px;
    line-height: 1;
}

.review-summary-card small {
    color: #6b7280;
    text-align: right;
}

.review-compact-empty {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 0 14px;
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.review-compact-empty[hidden] {
    display: none !important;
}

.review-compact-rating {
    display: grid;
    gap: 6px;
    min-width: 98px;
}

.review-compact-rating strong {
    color: #111827;
    font-size: 30px;
    line-height: 1;
}

.review-compact-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #1f2937;
    font-size: 16px;
}

.review-compact-copy p {
    margin: 0;
    color: #6b7280;
    line-height: 1.6;
}

.review-toggle-button {
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.review-action-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}

.review-form-panel[hidden],
.review-list:empty {
    display: none !important;
}

.review-stars {
    display: inline-flex;
    gap: 3px;
    color: #f5a623;
    line-height: 1;
}

.review-stars .is-empty {
    color: #d1d5db;
}

.product-review-alert {
    margin-bottom: 16px;
}

.review-list,
.review-pending-slot {
    display: grid;
    gap: 12px;
}

.review-pending-slot:not(:empty) {
    margin-bottom: 14px;
}

.review-card {
    padding: 16px 18px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .05);
}

.review-card-pending {
    border-color: #fed7aa;
    background: #fff7ed;
}

.review-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.review-card strong {
    color: #1f2937;
    font-size: 16px;
}

.review-card p {
    margin: 10px 0 0;
    color: #374151;
    line-height: 1.7;
}

.review-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px 12px;
    color: #6b7280;
    font-size: 13px;
}

.review-meta i {
    color: #16a34a;
}

.review-status-badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 999px;
    background: #ffedd5;
    color: #9a3412;
    font-size: 12px;
    font-weight: 800;
}

.review-empty-box {
    margin-bottom: 0;
}

.review-pagination-wrap {
    margin-top: 14px;
}

.review-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.review-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.review-page-btn:hover:not(:disabled) {
    border-color: #86c83d;
    color: #4f9a1a;
    background: #f7fee7;
    transform: translateY(-1px);
}

.review-page-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.review-page-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    min-width: 70px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-weight: 800;
}

.product-review-section.is-loading-reviews .review-list {
    opacity: .55;
    pointer-events: none;
}

.review-form-panel {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.review-reward-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
}

.review-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.product-review-form label {
    display: inline-block;
    margin-bottom: 8px;
    color: #374151;
    font-weight: 700;
}

.product-review-form input[type="text"],
.product-review-form textarea {
    width: 100%;
    max-width: none;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    font: inherit;
    outline: 0;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.product-review-form input[type="text"]:focus,
.product-review-form textarea:focus {
    border-color: #9ca3af;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, .08);
}

.product-review-form textarea {
    resize: vertical;
}

.review-rating-input {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.review-rating-input input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.review-rating-input label {
    margin: 0;
    color: #d1d5db;
    font-size: 24px;
    cursor: pointer;
    transition: color .16s ease, transform .16s ease;
}

.review-rating-input label:hover,
.review-rating-input label:hover ~ label,
.review-rating-input input:checked ~ label {
    color: #f5a623;
}

.review-rating-input label:hover {
    transform: translateY(-1px);
}

.review-submit-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.badge-approved {
    background: #dcfce7;
    color: #166534;
}

.badge-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.review-admin-stats .card p {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
    color: #1d4ed8;
}

.review-admin-filter {
    margin: 18px 0;
}

.review-filter-actions,
.review-admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-admin-table th,
.review-admin-table td {
    vertical-align: top;
}

.review-admin-text {
    max-width: 360px;
    line-height: 1.6;
}

.admin-review-stars {
    white-space: nowrap;
}

.btn-small {
    padding: 7px 10px;
    font-size: 13px;
}

.btn-danger {
    background: #dc2626;
    color: #ffffff;
}



@media (max-width: 768px) {
    .product-review-header {
        display: grid;
    }

    .review-summary-card {
        justify-items: start;
        min-width: 0;
    }

    .review-summary-card small {
        text-align: left;
    }

    .review-compact-empty {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 12px;
        padding: 15px;
    }

    .review-compact-rating {
        min-width: 0;
    }

    .review-toggle-button {
        width: 100%;
    }

    .review-form-grid {
        grid-template-columns: 1fr;
    }

    .review-card-top {
        display: grid;
    }

    .review-status-badge {
        justify-self: start;
    }
}




/* Product card rating like compact marketplace star */
.product-price-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    margin-top: 0;
}

.product-price-row .product-price {
    margin-top: 0;
}

.product-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.product-card-rating i {
    color: #f5a400;
    font-size: 17px;
}

.product-card-rating span {
    color: #6b7280;
}

@media (max-width: 768px) {
    .product-card-rating {
        gap: 4px;
        font-size: 13px;
    }

    .product-card-rating i {
        font-size: 16px;
    }
}

@media (max-width: 420px) {
    .product-card-rating {
        font-size: 12px;
    }

    .product-card-rating i {
        font-size: 15px;
    }
}


.product-card-simple:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
}

.product-image-link {
    border-bottom: 1px solid #f1f5f9;
}

.product-discount-line span {
    line-height: 1;
}


/* Final cleanup product card: hide badges/detail and keep card heights consistent */
.product-badges,
.product-detail-link {
    display: none !important;
}

.product-card-simple {
    transition: transform .18s ease, box-shadow .18s ease;
}

.product-card-simple .product-card-body {
    min-height: 118px;
}

.product-card-simple .product-price-row {
    min-height: 24px;
}

@media (max-width: 768px) {
    .product-card-simple .product-card-body {
        min-height: 108px;
    }

    .product-price-wrap {
        min-height: 42px;
    }
}

@media (max-width: 420px) {
    .product-card-simple .product-card-body {
        min-height: 104px;
    }
}


/* Final compact product card: rapatkan nama produk dan harga */
.product-card-simple .product-card-body {
    min-height: 0 !important;
    gap: 4px !important;
    padding: 11px 14px 13px !important;
}

.product-card-simple .product-name {
    min-height: 0 !important;
    margin: 0 !important;
    line-height: 1.32 !important;
}

.product-card-simple .product-price-wrap {
    min-height: 0 !important;
    margin-top: 2px !important;
    gap: 3px !important;
    align-content: start !important;
}

.product-card-simple .product-price-row {
    min-height: 0 !important;
    align-items: flex-end !important;
    margin-top: 0 !important;
}

.product-card-simple .product-discount-line {
    margin: 0 !important;
}

.product-card-simple .product-price {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .product-card-simple .product-card-body {
        min-height: 0 !important;
        gap: 4px !important;
        padding: 10px 12px 12px !important;
    }

    .product-card-simple .product-price-wrap {
        min-height: 0 !important;
        margin-top: 2px !important;
    }
}


/* Premium green home section headings */
.section-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.92) 0%, rgba(240, 253, 244, 0.62) 54%, rgba(255, 255, 255, 0.92) 100%);
    border: 1px solid rgba(187, 247, 208, 0.78);
    box-shadow: 0 10px 26px rgba(22, 101, 52, 0.08);
    backdrop-filter: blur(8px);
}

.section-title-modern {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #162033;
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
}

.section-title-modern::after {
    display: none !important;
    content: none !important;
}

.section-title-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    font-size: 15px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09);
}

.section-title-icon::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.72);
}

.section-title-icon i {
    position: relative;
    z-index: 1;
}

.section-title-icon.is-featured {
    background: linear-gradient(135deg, #fff3c4 0%, #ffd75f 100%);
    color: #d97706;
}

.section-title-icon.is-best {
    background: linear-gradient(135deg, #ffd7cb 0%, #ff8c67 100%);
    color: #dc2626;
}

.section-title-icon.is-latest {
    background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
    color: #2563eb;
}

.section-link-modern {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 36px;
    padding: 8px 13px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid rgba(134, 239, 172, 0.95);
    color: #15803d;
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(22, 101, 52, 0.09);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.section-link-modern i {
    font-size: 11px;
    transition: transform 0.18s ease;
}

.section-link-modern:hover {
    transform: translateY(-1px);
    color: #166534;
    border-color: rgba(74, 222, 128, 1);
    box-shadow: 0 12px 24px rgba(22, 101, 52, 0.15);
}

.section-link-modern:hover i {
    transform: translateX(2px);
}

@media (max-width: 768px) {
    .section-heading {
        gap: 10px;
        margin-bottom: 13px;
        padding: 9px 10px;
        border-radius: 18px;
    }

    .section-title-modern {
        gap: 9px;
        font-size: clamp(18px, 5vw, 22px);
        letter-spacing: -0.02em;
    }

    .section-title-icon {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
        border-radius: 11px;
        font-size: 13px;
    }

    .section-link-modern {
        gap: 6px;
        min-height: 32px;
        padding: 7px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .section-link-modern i {
        font-size: 10px;
    }
}

@media (max-width: 390px) {
    .section-heading {
        padding: 8px 9px;
    }

    .section-title-modern {
        font-size: 17px;
    }

    .section-title-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        border-radius: 10px;
        font-size: 12px;
    }

    .section-link-modern {
        padding: 7px 9px;
        font-size: 11px;
    }
}



/* Admin order detail: visitor monitor long values */
.order-visitor-monitor-box {
    max-width: 100%;
    overflow: hidden;
}

.order-visitor-monitor-box .summary-row {
    align-items: flex-start;
    min-width: 0;
}

.order-visitor-monitor-box .summary-row > div {
    min-width: 0;
}

.order-visitor-monitor-box .summary-row > div:last-child {
    flex: 1 1 auto;
    text-align: right;
}

.order-visitor-monitor-box code {
    display: inline-block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 768px) {
    .order-visitor-monitor-box .summary-row > div:last-child {
        width: 100%;
        text-align: left;
    }
}

/* Admin orders bulk action */
.admin-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.admin-card-heading h2 {
    margin: 0 0 6px;
}

.bulk-order-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    background: #f8fafc;
}

.bulk-order-actions select {
    min-width: 240px;
    max-width: 100%;
    padding: 11px 12px;
    border: 1px solid #d1d5db;
    border-radius: 11px;
    background: #ffffff;
    color: #273142;
    font: inherit;
}

.btn-action-detail {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.orders-table th,
.orders-table td {
    vertical-align: middle;
}

.td-check-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    cursor: pointer;
}

.td-check-wrap input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.td-check-wrap span {
    width: 22px;
    height: 22px;
    border: 2px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .16s ease;
}

.td-check-wrap span::after {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #ffffff;
    font-size: 12px;
    opacity: 0;
    transform: scale(.7);
    transition: all .16s ease;
}

.td-check-wrap input:checked + span {
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 8px 16px rgba(37, 99, 235, .22);
}

.td-check-wrap input:checked + span::after {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 768px) {
    .bulk-order-actions {
        align-items: stretch;
    }

    .bulk-order-actions select,
    .bulk-order-actions .btn {
        width: 100%;
    }

    .btn-action-detail {
        padding-left: 13px;
        padding-right: 13px;
    }
}


/* Admin order toolbar: bulk action + search */
.orders-management-toolbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.orders-management-toolbar .bulk-order-actions {
    flex: 1 1 420px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
}

.orders-management-toolbar .bulk-order-actions select {
    flex: 1 1 auto;
    min-width: 0;
}

.orders-management-toolbar .bulk-order-actions .btn {
    flex: 0 0 auto;
    min-width: 132px;
    justify-content: center;
}

.order-search-form {
    flex: 1 1 430px;
    margin: 0;
}

.order-search-box {
    height: 100%;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    background: #f8fafc;
}

.order-search-box i {
    width: 38px;
    color: #64748b;
    text-align: center;
    font-size: 16px;
}

.order-search-box input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    border: 1px solid #d1d5db;
    border-right: 0;
    border-radius: 11px 0 0 11px;
    padding: 0 12px;
    background: #ffffff;
    color: #273142;
    font: inherit;
    outline: none;
}

.order-search-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    position: relative;
    z-index: 1;
}

.order-search-box button {
    flex: 0 0 auto;
    height: 44px;
    border: 1px solid #2563eb;
    border-radius: 0 11px 11px 0;
    padding: 0 18px;
    background: #2563eb;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

@media (max-width: 920px) {
    .orders-management-toolbar {
        flex-direction: column;
    }

    .orders-management-toolbar .bulk-order-actions,
    .order-search-form {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .orders-management-toolbar .bulk-order-actions {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px;
    }

    .orders-management-toolbar .bulk-order-actions select {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
        height: 48px;
    }

    .orders-management-toolbar .bulk-order-actions .btn {
        width: auto !important;
        min-width: 116px;
        height: 48px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .order-search-box {
        min-height: 0;
        padding: 10px;
    }

    .order-search-box i {
        display: none;
    }

    .order-search-box input {
        height: 48px;
        font-size: 14px;
    }

    .order-search-box button {
        height: 48px;
        padding: 0 14px;
    }
}

@media (max-width: 390px) {
    .orders-management-toolbar .bulk-order-actions .btn {
        min-width: 96px;
    }

    .orders-management-toolbar .bulk-order-actions .btn i {
        display: none;
    }

    .order-search-box button {
        padding: 0 12px;
    }
}


/* Admin orders: compact page after summary removal */
.admin-orders-filter-card {
    margin-top: 18px;
}


/* Admin edit profile */
.admin-profile-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.admin-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-profile-layout {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 18px;
    align-items: start;
}

.admin-profile-card,
.admin-profile-form-card {
    background: #ffffff;
    border: 1px solid #e6ebf3;
    border-radius: 22px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
    padding: 24px;
}

.admin-profile-card {
    text-align: center;
    position: sticky;
    top: 88px;
}

.admin-profile-avatar {
    width: 82px;
    height: 82px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    border-radius: 28px;
    background: linear-gradient(135deg, #e0edff 0%, #eef6ff 100%);
    color: #2563eb;
    font-size: 34px;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .12);
}

.admin-profile-card h2,
.admin-profile-form-card h2 {
    margin: 0 0 8px;
    color: #172033;
    letter-spacing: -0.02em;
}

.admin-profile-meta {
    display: grid;
    gap: 10px;
    margin-top: 22px;
    text-align: left;
}

.admin-profile-meta div {
    padding: 13px 14px;
    border: 1px solid #edf1f7;
    border-radius: 16px;
    background: #f8fafc;
}

.admin-profile-meta span {
    display: block;
    margin-bottom: 4px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-profile-meta strong {
    display: block;
    color: #273142;
    word-break: break-word;
}

.admin-form-heading {
    margin-bottom: 18px;
}

.admin-input-icon {
    position: relative;
}

.admin-input-icon i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.admin-input-icon input {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px 12px 44px;
    border: 1px solid #d7dde7;
    border-radius: 14px;
    background: #ffffff;
    color: #273142;
    font: inherit;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.admin-input-icon input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.admin-form-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 10px;
    color: #172033;
    font-weight: 900;
}

.admin-form-divider::before,
.admin-form-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: #e5eaf2;
}

.admin-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.admin-form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

@media (max-width: 900px) {
    .admin-profile-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-profile-layout {
        grid-template-columns: 1fr;
    }

    .admin-profile-card {
        position: static;
    }
}

@media (max-width: 640px) {
    .admin-profile-card,
    .admin-profile-form-card {
        border-radius: 18px;
        padding: 18px;
    }

    .admin-page-actions,
    .admin-form-actions {
        width: 100%;
    }

    .admin-page-actions .btn,
    .admin-form-actions .btn {
        flex: 1 1 auto;
    }
}


/* Admin edit profile name refinement */
.admin-profile-card h2 {
    margin-bottom: 18px;
}

.admin-profile-form-card .admin-form-grid-2 {
    align-items: start;
}


/* Admin reviews: compact page after summary removal */
.review-admin-filter-compact {
    margin-top: 18px;
}


/* Admin sidebar pending badges */
.admin-menu-link {
    position: relative;
}

.admin-menu-badge {
    min-width: 23px;
    height: 23px;
    padding: 0 7px;
    margin-left: auto;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ef4444;
    color: #ffffff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(239, 68, 68, .28);
}

.admin-menu-link.is-active .admin-menu-badge {
    background: #2563eb;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .26);
}

@media (max-width: 768px) {
    .admin-menu-badge {
        min-width: 22px;
        height: 22px;
        font-size: 11px;
        padding: 0 7px;
    }
}


/* Admin products bulk action + search */
.products-management-toolbar {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
}

.bulk-product-actions {
    flex: 1 1 420px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    background: #f8fafc;
}

.bulk-product-actions select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 12px;
    height: 46px;
    border: 1px solid #d1d5db;
    border-radius: 11px;
    background: #ffffff;
    color: #273142;
    font: inherit;
}

.bulk-product-actions .btn {
    flex: 0 0 auto;
    min-width: 132px;
    height: 46px;
    justify-content: center;
}

.product-search-form {
    flex: 1 1 420px;
    margin: 0;
}

.product-search-box {
    height: 100%;
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 12px;
    border: 1px solid #e5eaf2;
    border-radius: 14px;
    background: #f8fafc;
}

.product-search-box i {
    width: 38px;
    color: #64748b;
    text-align: center;
    font-size: 16px;
}

.product-search-box input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    border: 1px solid #d1d5db;
    border-right: 0;
    border-radius: 11px 0 0 11px;
    padding: 0 12px;
    background: #ffffff;
    color: #273142;
    font: inherit;
    outline: none;
}

.product-search-box input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
    position: relative;
    z-index: 1;
}

.product-search-box button {
    flex: 0 0 auto;
    height: 46px;
    border: 1px solid #2563eb;
    border-radius: 0 11px 11px 0;
    padding: 0 18px;
    background: #2563eb;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.product-search-note {
    margin: 0 0 14px;
}

.product-search-note a {
    margin-left: 8px;
    color: #2563eb;
    font-weight: 800;
}

.admin-product-thumb {
    width: 72px;
    height: 54px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.admin-row-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.products-table th,
.products-table td {
    vertical-align: middle;
}

@media (max-width: 920px) {
    .products-management-toolbar {
        flex-direction: column;
    }

    .bulk-product-actions,
    .product-search-form {
        flex: 1 1 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .bulk-product-actions {
        flex-direction: row !important;
        align-items: center !important;
        padding: 10px;
    }

    .bulk-product-actions select {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
        height: 48px;
    }

    .bulk-product-actions .btn {
        width: auto !important;
        min-width: 116px;
        height: 48px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .product-search-box {
        min-height: 0;
        padding: 10px;
    }

    .product-search-box i {
        display: none;
    }

    .product-search-box input {
        height: 48px;
        font-size: 14px;
    }

    .product-search-box button {
        height: 48px;
        padding: 0 14px;
    }

    .admin-row-actions {
        flex-wrap: nowrap;
    }
}

@media (max-width: 390px) {
    .bulk-product-actions .btn {
        min-width: 96px;
    }

    .bulk-product-actions .btn i {
        display: none;
    }

    .product-search-box button {
        padding: 0 12px;
    }
}


/* Admin Review Pelanggan: ringkasan dihapus */


.review-admin-filter-compact h2 {
    margin-bottom: 10px;
}

.review-admin-filter-compact .filter-form {
    margin-top: 12px;
}


/* Halaman 404 terintegrasi */
.not-found-integrated {
    padding: 52px 0 40px;
    background:
        radial-gradient(circle at top left, rgba(134, 210, 63, 0.12), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.not-found-integrated-card {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 34px 26px;
    text-align: center;
    border: 1px solid #e6ebf3;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
}

.not-found-integrated-icon {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    color: #ffffff;
    background: linear-gradient(135deg, #86d23f, #63bd21);
    box-shadow: 0 14px 28px rgba(99, 189, 33, 0.22);
    font-size: 28px;
}

.not-found-integrated-code {
    margin-bottom: 8px;
    color: #182231;
    font-size: clamp(56px, 12vw, 104px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.08em;
}

.not-found-integrated-card h1 {
    margin: 0;
    color: #182231;
    font-size: clamp(25px, 5vw, 38px);
    line-height: 1.18;
    letter-spacing: -0.04em;
}

.not-found-integrated-card p {
    width: min(100%, 520px);
    margin: 14px auto 0;
    color: #687386;
    font-size: 16px;
    line-height: 1.7;
}

.not-found-integrated-actions {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.not-found-integrated-primary,
.not-found-integrated-secondary {
    min-height: 50px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 15px;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.not-found-integrated-primary {
    color: #ffffff;
    background: #86d23f;
    box-shadow: 0 14px 28px rgba(134, 210, 63, 0.24);
}

.not-found-integrated-secondary {
    color: #2563eb;
    background: #ffffff;
    border: 1px solid #dbe5f3;
}

.not-found-integrated-primary:hover,
.not-found-integrated-secondary:hover {
    transform: translateY(-2px);
}

.not-found-integrated-help {
    width: min(100%, 520px);
    margin: 24px auto 0;
    padding: 16px;
    border-radius: 18px;
    background: #f8fafc;
    border: 1px solid #e6ebf3;
    text-align: left;
    display: grid;
    gap: 10px;
}

.not-found-integrated-help div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #596579;
    font-size: 14px;
    line-height: 1.55;
}

.not-found-integrated-help i {
    margin-top: 3px;
    color: #63bd21;
}

@media (max-width: 768px) {
    .not-found-integrated {
        padding: 34px 0 28px;
    }

    .not-found-integrated-card {
        padding: 28px 18px;
        border-radius: 24px;
    }

    .not-found-integrated-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 24px;
    }

    .not-found-integrated-card p {
        font-size: 15px;
    }

    .not-found-integrated-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .not-found-integrated-primary,
    .not-found-integrated-secondary {
        width: 100%;
    }
}


/* Admin Pengaturan Toko tab */
.store-settings-card {
    border: 1px solid #e6ebf3;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.store-settings-form {
    margin: 0;
}

.store-settings-tabs {
    display: flex;
    gap: 10px;
    padding: 14px;
    overflow-x: auto;
    background: #f8fafc;
    border-bottom: 1px solid #e6ebf3;
    scrollbar-width: thin;
}

.store-settings-tab {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #dbe5f3;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #ffffff;
    color: #64748b;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.store-settings-tab i {
    font-size: 15px;
}

.store-settings-tab:hover {
    color: #2563eb;
    border-color: #bfd2ff;
    transform: translateY(-1px);
}

.store-settings-tab.is-active {
    color: #ffffff;
    background: #2563eb;
    border-color: #2563eb;
    box-shadow: 0 14px 28px rgba(37, 99, 235, .22);
}

.store-settings-panels {
    padding: 24px;
}

.store-settings-panel {
    animation: storeSettingsFade .18s ease;
}

@keyframes storeSettingsFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.store-settings-panel-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid #e6ebf3;
}

.store-settings-panel-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    font-size: 18px;
}

.store-settings-panel-heading h2 {
    margin: 0 0 4px;
    color: #182231;
    font-size: 25px;
    line-height: 1.22;
    letter-spacing: -.03em;
}

.store-settings-panel-heading p {
    margin: 0;
    color: #6b7280;
    line-height: 1.55;
}

.store-settings-card .form-group {
    margin-bottom: 18px;
}

.store-settings-card label {
    display: inline-block;
    margin-bottom: 8px;
    color: #273142;
    font-weight: 800;
}

.store-settings-card input[type="text"],
.store-settings-card input[type="email"],
.store-settings-card input[type="file"],
.store-settings-card textarea,
.store-settings-card select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    color: #202938;
    font: inherit;
    outline: none;
}

.store-settings-card input[type="text"],
.store-settings-card input[type="email"],
.store-settings-card select {
    min-height: 48px;
    padding: 11px 14px;
}

.store-settings-card input[type="file"] {
    padding: 12px;
}

.store-settings-card textarea {
    padding: 12px 14px;
    resize: vertical;
}

.store-settings-card input:focus,
.store-settings-card textarea:focus,
.store-settings-card select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

.store-settings-field-grid,
.store-settings-media-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.store-settings-media-box {
    padding: 18px;
    border: 1px solid #e6ebf3;
    border-radius: 18px;
    background: #f8fafc;
}

.store-settings-media-box h3 {
    margin: 0 0 14px;
    color: #273142;
    font-size: 18px;
}

.store-settings-preview-box {
    margin-bottom: 12px;
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #ffffff;
}

.store-settings-preview-box .store-logo-preview {
    max-width: 210px;
    max-height: 64px;
    object-fit: contain;
    display: block;
}

.store-settings-preview-box .store-banner-preview {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

.store-settings-favicon-preview-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
}

.store-settings-preview-box .store-favicon-preview {
    width: 64px;
    height: 64px;
    object-fit: contain;
    display: block;
    border-radius: 12px;
}

.store-settings-check {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: #4b5563 !important;
    font-weight: 700 !important;
}

.store-settings-check input {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
}

.store-settings-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, .92);
    border-top: 1px solid #e6ebf3;
    backdrop-filter: blur(12px);
}

.store-settings-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

@media (max-width: 860px) {
    .store-settings-field-grid,
    .store-settings-media-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .store-settings-card {
        border-radius: 20px;
    }

    .store-settings-tabs {
        padding: 12px;
        gap: 8px;
    }

    .store-settings-tab {
        min-height: 44px;
        padding: 0 13px;
        border-radius: 13px;
        font-size: 14px;
    }

    .store-settings-panels {
        padding: 20px 16px;
    }

    .store-settings-panel-heading {
        gap: 12px;
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    .store-settings-panel-icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 14px;
        font-size: 16px;
    }

    .store-settings-panel-heading h2 {
        font-size: 22px;
    }

    .store-settings-panel-heading p {
        font-size: 14px;
    }

    .store-settings-actions {
        padding: 12px 16px;
    }

    .store-settings-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .store-settings-actions .btn-light {
        flex: 0 0 auto;
    }
}

.inline-delete-form {
    display: inline;
    margin: 0;
}

.link-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* Footer modern editable */
.site-footer {
    margin-top: 44px;
    padding: 34px 0;
    text-align: left;
    color: #5f6b7a;
    border-top: 1px solid #e6ebf3;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    align-items: start;
}

.footer-column h2 {
    margin: 0 0 13px;
    color: #202938;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.footer-brand .footer-logo {
    display: block;
    width: auto;
    max-width: 190px;
    max-height: 58px;
    object-fit: contain;
    margin-bottom: 13px;
}

.footer-brand p,
.footer-muted {
    margin: 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
}

.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.footer-contact-list span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #445064;
    font-size: 14px;
    line-height: 1.35;
}

.footer-contact-list i {
    width: 18px;
    color: var(--primary);
    text-align: center;
}

.footer-links {
    display: grid;
    gap: 9px;
}

.footer-links a {
    width: max-content;
    max-width: 100%;
    color: #5f6b7a;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.45;
    transition: color .18s ease, transform .18s ease;
}

.footer-links a:hover {
    color: var(--primary-dark);
    transform: translateX(2px);
}

.footer-service-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-service-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #5f6b7a;
    font-size: 14px;
    line-height: 1.45;
}

.footer-service-list i {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-dark);
    background: #ecfdf3;
    border: 1px solid #d7f6df;
    font-size: 13px;
}

.footer-payment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.footer-payment-logo,
.footer-payment-text {
    min-height: 36px;
    border: 1px solid #e4e8ef;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.footer-payment-logo {
    min-width: 58px;
    padding: 7px 10px;
}

.footer-payment-logo img {
    display: block;
    width: auto;
    max-width: 74px;
    max-height: 24px;
    object-fit: contain;
}

.footer-payment-text {
    padding: 7px 11px;
    color: #445064;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .02em;
}

.site-copyright {
    padding: 15px 0;
    color: #f8fafc;
    background: #2f3a4a;
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: .01em;
}

@media (max-width: 768px) {
    .site-footer {
        margin-top: 34px;
        padding: 28px 0 26px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .footer-column {
        text-align: left;
    }

    .footer-brand .footer-logo {
        max-width: 170px;
    }

    .site-copyright {
        padding: 14px 0;
        font-size: 13px;
    }
}

/* Admin editor footer */
.store-settings-footer-block {
    margin-bottom: 22px;
    padding: 18px;
    border: 1px solid #e6ebf3;
    border-radius: 18px;
    background: #f8fafc;
}

.store-settings-footer-block > h3,
.store-settings-footer-block-title h3 {
    margin: 0 0 14px;
    color: #202938;
    font-size: 18px;
    line-height: 1.25;
}

.store-settings-footer-block-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.store-settings-footer-block-title h3 {
    margin: 0;
}

.store-settings-footer-block-title select {
    width: auto;
    min-width: 130px;
}

.store-settings-footer-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.store-settings-footer-controls label {
    margin: 0;
    color: #667085;
    font-size: 13px;
    font-weight: 700;
}

.store-settings-footer-controls input[type="number"] {
    width: 74px;
    min-height: 42px;
    padding: 9px 10px;
    text-align: center;
}

.store-settings-toggle-grid,
.footer-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.footer-editor-item {
    padding: 15px;
    border: 1px solid #e6ebf3;
    border-radius: 16px;
    background: #ffffff;
}

.footer-editor-item h4 {
    margin: 0 0 12px;
    color: #334155;
    font-size: 15px;
}

.store-settings-card code {
    padding: 2px 6px;
    border-radius: 7px;
    color: #1d4ed8;
    background: #eff6ff;
    font-size: 12px;
}

@media (max-width: 860px) {
    .store-settings-toggle-grid,
    .footer-editor-grid {
        grid-template-columns: 1fr;
    }

    .store-settings-footer-block-title {
        align-items: stretch;
        flex-direction: column;
    }

    .store-settings-footer-controls {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
    }

    .store-settings-footer-controls input[type="number"],
    .store-settings-footer-block-title select {
        width: 100%;
    }
}

/* Footer brand content editor */
.footer-brand-content {
    color: #667085;
    font-size: 14px;
    line-height: 1.65;
}

.footer-brand-content > :first-child {
    margin-top: 0;
}

.footer-brand-content > :last-child {
    margin-bottom: 0;
}

.footer-brand-content p {
    margin: 0 0 10px;
}

.footer-brand-content strong,
.footer-brand-content b {
    color: #202938;
}

.footer-brand-content a {
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 700;
}

.footer-brand-content a:hover {
    text-decoration: underline;
}

.footer-brand-content ul,
.footer-brand-content ol {
    margin: 8px 0 0;
    padding-left: 18px;
}

.footer-brand-content img {
    display: block;
    width: auto;
    max-width: 210px;
    max-height: 96px;
    object-fit: contain;
    margin: 0 0 12px;
}

.footer-image-admin-box {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid #e4e8ef;
    border-radius: 16px;
    background: #ffffff;
}

.footer-image-admin-preview {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #cfd8e6;
    border-radius: 14px;
    background: #f8fafc;
}

.footer-image-admin-preview img {
    display: block;
    width: auto;
    max-width: 112px;
    max-height: 72px;
    object-fit: contain;
}

.footer-image-admin-info {
    display: grid;
    gap: 8px;
    color: #445064;
    font-size: 13px;
    line-height: 1.45;
}

.footer-image-admin-info code {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #1f2937;
    white-space: nowrap;
}

.inline-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #445064;
    font-size: 13px;
}

@media (max-width: 640px) {
    .footer-image-admin-box {
        grid-template-columns: 1fr;
    }

    .footer-brand-content img {
        max-width: 180px;
    }
}

/* Related products on product detail */
.related-products-section {
    margin-top: 28px;
    margin-bottom: 24px;
}

.related-products-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.related-products-heading h2 {
    margin: 0 0 6px;
    color: #1f2937;
    letter-spacing: .02em;
}

.related-products-heading p {
    margin: 0;
    color: #6b7280;
    line-height: 1.7;
}

.related-products-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid #d9e8c8;
    border-radius: 999px;
    background: #f7fee7;
    color: #4f9a1a;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.related-products-view-all:hover {
    border-color: #86c83d;
    background: #eefbdc;
    transform: translateY(-1px);
}

.related-products-grid .product-card-simple {
    max-width: none;
}

@media (max-width: 768px) {
    .related-products-heading {
        align-items: flex-start;
    }

    .related-products-view-all {
        min-height: 36px;
        padding: 7px 11px;
        font-size: 13px;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .related-products-heading {
        gap: 10px;
    }

    .related-products-heading h2 {
        font-size: 20px;
    }

    .related-products-heading p {
        font-size: 13px;
    }
}


/* Breadcrumb detail produk: samakan alur dengan halaman kategori tanpa mengubah breadcrumb kategori. */
.detail-breadcrumb-section {
    padding-top: 18px;
}

.detail-breadcrumb-section .product-breadcrumb {
    margin-bottom: 12px;
}

.detail-product-page {
    padding-top: 0;
}

@media (max-width: 768px) {
    .detail-breadcrumb-section {
        padding-top: 14px;
    }

    .detail-breadcrumb-section .product-breadcrumb {
        margin-bottom: 10px;
    }

    .detail-product-page {
        padding-top: 0;
    }
}

@media (max-width: 420px) {
    .detail-breadcrumb-section {
        padding-top: 14px;
    }

    .detail-product-page {
        padding-top: 0;
    }
}

/* Admin Pengaturan Tampilan */
.admin-display-settings-box .admin-setting-section {
    padding: 20px 0;
    border-bottom: 1px solid #edf0f5;
}

.admin-display-settings-box .admin-setting-section:first-of-type {
    padding-top: 0;
}

.admin-display-settings-box .admin-setting-section:last-of-type {
    border-bottom: 0;
}

.admin-setting-heading {
    margin-bottom: 16px;
}

.admin-setting-heading h2 {
    margin: 0 0 5px;
    color: #1f2937;
    font-size: 20px;
}

.admin-setting-heading p {
    margin: 0;
    color: #6b7280;
    line-height: 1.6;
}

.admin-setting-grid.two-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-setting-control {
    width: 100%;
    max-width: 520px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #fff;
}

@media (max-width: 720px) {
    .admin-setting-grid.two-columns {
        grid-template-columns: 1fr;
    }
}

/* Produk Lainnya tabs on product detail */
.product-other-section {
    margin-top: 28px;
    margin-bottom: 24px;
}

.product-other-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.product-other-heading h2 {
    margin: 0 0 6px;
    color: #1f2937;
    letter-spacing: .02em;
}

.product-other-heading p,
.product-other-panel-heading p {
    margin: 0;
    color: #6b7280;
    line-height: 1.7;
}


.product-other-section[hidden],
.product-other-tab[hidden],
.product-other-panel[hidden] {
    display: none !important;
}

.product-other-tabs {
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 12px;
    margin-bottom: 10px;
    scroll-padding-inline: 8px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.product-other-tabs::-webkit-scrollbar {
    display: none;
}

.product-other-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid #dfe7d6;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.product-other-tab:hover,
.product-other-tab.is-active {
    border-color: #86c83d;
    background: #f0fbdc;
    color: #4f9a1a;
    transform: translateY(-1px);
}

.product-other-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 15px;
}

.product-other-view-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d9e8c8;
    border-radius: 999px;
    background: #f7fee7;
    color: #4f9a1a;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.product-other-view-all:hover {
    border-color: #86c83d;
    background: #eefbdc;
    transform: translateY(-1px);
}

.product-other-grid .product-card-simple {
    max-width: none;
}

.product-other-state {
    padding: 14px 16px;
    border: 1px dashed #d6e8c6;
    border-radius: 14px;
    background: #fbfef7;
    color: #6b7280;
    font-size: 14px;
}

@media (max-width: 640px) {
    .product-other-section {
        margin-top: 22px;
    }

    .product-other-heading {
        margin-bottom: 10px;
    }

    .product-other-heading h2 {
        font-size: 20px;
    }

    .product-other-heading p,
    .product-other-panel-heading p {
        font-size: 13px;
    }

    .product-other-tabs {
        gap: 8px;
        padding: 4px 4px 12px;
        margin: 0 -4px 10px;
        scroll-snap-type: x proximity;
    }

    .product-other-tab {
        max-width: 72vw;
        min-height: 36px;
        padding: 8px 12px;
        font-size: 13px;
        overflow: hidden;
        text-overflow: ellipsis;
        scroll-snap-align: start;
    }

    .product-other-panel-heading {
        align-items: flex-start;
    }

    .product-other-view-all {
        white-space: nowrap;
    }
}

/* Content Website: static pages, articles, tutorial categories */
.content-admin-search,
.content-admin-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}

.content-admin-search input,
.content-admin-filter input,
.content-admin-filter select,
.content-admin-form input[type="text"],
.content-admin-form input[type="number"],
.content-admin-form input[type="datetime-local"],
.content-admin-form select,
.content-admin-form textarea {
    width: 100%;
    max-width: 720px;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font: inherit;
    background: #fff;
}

.content-admin-search input,
.content-admin-filter input {
    max-width: 360px;
}

.content-admin-filter select {
    max-width: 220px;
}

.content-admin-form textarea {
    line-height: 1.65;
}

.admin-content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.admin-content-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 9px 13px;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #fff;
    color: #374151;
    font-weight: 700;
    cursor: pointer;
}

.admin-content-tab.is-active {
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}

.admin-content-panel[hidden],
[data-product-mode-panel][hidden] {
    display: none !important;
}

.admin-content-panel {
    animation: contentFade .16s ease;
}

@keyframes contentFade {
    from { opacity: .2; transform: translateY(3px); }
    to { opacity: 1; transform: translateY(0); }
}

.content-editor-note {
    max-width: 820px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border: 1px solid #dcfce7;
    border-radius: 12px;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    line-height: 1.5;
}

.content-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.content-current-image {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

.content-current-image img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.seo-preview-box {
    max-width: 720px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .05);
}

.seo-preview-label {
    margin-bottom: 8px;
    color: #6b7280;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.seo-preview-title {
    color: #1a0dab;
    font-size: 18px;
    line-height: 1.25;
    margin-bottom: 3px;
}

.seo-preview-url {
    color: #047857;
    font-size: 13px;
    margin-bottom: 5px;
}

.seo-preview-desc {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
}

.admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e7eb;
}

.inline-form {
    display: inline-block;
    margin: 3px 0;
}

.btn-danger {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
}

.product-search-results {
    max-width: 720px;
    margin-top: 8px;
    border-radius: 12px;
    overflow: hidden;
}

.product-search-item,
.product-search-empty {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-top: 0;
    background: #fff;
    color: #111827;
    text-align: left;
}

.product-search-item:first-child,
.product-search-empty:first-child {
    border-top: 1px solid #e5e7eb;
    border-radius: 12px 12px 0 0;
}

.product-search-item:last-child,
.product-search-empty:last-child {
    border-radius: 0 0 12px 12px;
}

.product-search-item:hover {
    background: #f0fdf4;
    cursor: pointer;
}

.selected-products {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.selected-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #166534;
    font-size: 13px;
    font-weight: 700;
}

.selected-product-chip button {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: #bbf7d0;
    color: #14532d;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.content-page-wrap {
    max-width: 920px;
    padding-top: 6px;
    padding-bottom: 32px;
}

.content-page-header {
    margin-bottom: 18px;
}

.content-page-header h1 {
    margin: 0 0 10px;
    color: #111827;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.15;
}

.content-page-header p {
    margin: 0;
    color: #4b5563;
    font-size: 16px;
    line-height: 1.7;
}

.content-featured-image {
    margin: 18px 0 22px;
}

.content-featured-image img {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.content-featured-image figcaption {
    margin-top: 8px;
    color: #6b7280;
    font-size: 13px;
    text-align: center;
}

.content-body {
    color: #1f2937;
    font-size: 16px;
    line-height: 1.85;
}

.content-body h2,
.content-body h3 {
    margin: 28px 0 10px;
    color: #111827;
    line-height: 1.25;
}

.content-body h2 {
    font-size: 25px;
}

.content-body h3 {
    font-size: 20px;
}

.content-body p,
.content-body ul,
.content-body ol,
.content-body blockquote,
.content-body table {
    margin: 0 0 16px;
}

.content-body a {
    color: #15803d;
    font-weight: 700;
    text-decoration: none;
}

.content-body a:hover {
    text-decoration: underline;
}

.content-body blockquote {
    padding: 12px 16px;
    border-left: 4px solid #16a34a;
    border-radius: 12px;
    background: #f0fdf4;
    color: #14532d;
}

.content-body table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 12px;
}

.content-body th,
.content-body td {
    padding: 10px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.content-body th {
    background: #f9fafb;
}

.content-body img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.article-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.article-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .05);
}

.article-card-image,
.article-card-image-empty {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #f3f4f6;
}

.article-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-card-image-empty {
    display: grid;
    place-items: center;
    color: #9ca3af;
    font-size: 34px;
}

.article-card-body {
    padding: 15px;
}

.article-card-category {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 5px 9px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #166534;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.article-card h2 {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
}

.article-card h2 a {
    color: #111827;
    text-decoration: none;
}

.article-card h2 a:hover {
    color: #15803d;
}

.article-card p {
    margin: 0 0 12px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
}

.article-card-meta,
.article-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: #6b7280;
    font-size: 13px;
}

.article-card-meta a {
    margin-left: auto;
    color: #15803d;
    font-weight: 800;
    text-decoration: none;
}

.article-detail-header .article-card-category {
    margin-bottom: 12px;
}

.article-detail-meta {
    margin-top: 12px;
}

.content-product-shortcode,
.article-related-products,
.article-related-section {
    margin-top: 28px;
}

.content-product-shortcode h3,
.section-heading-row h2 {
    margin: 0 0 14px;
    color: #111827;
    font-size: 22px;
}

.content-product-grid {
    margin-top: 8px;
}

.content-cta-box {
    margin: 20px 0;
    padding: 16px;
    border: 1px solid #dcfce7;
    border-radius: 16px;
    background: #f0fdf4;
    text-align: center;
}

.article-card-grid-small {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.article-card-compact .article-card-body {
    padding: 14px;
}

@media (max-width: 640px) {
    .content-admin-search,
    .content-admin-filter {
        align-items: stretch;
    }

    .content-admin-search input,
    .content-admin-filter input,
    .content-admin-filter select,
    .content-admin-search .btn,
    .content-admin-filter .btn {
        max-width: none;
        width: 100%;
    }

    .admin-content-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .admin-content-tabs::-webkit-scrollbar {
        display: none;
    }

    .admin-content-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 13px;
    }

    .content-page-wrap {
        padding-bottom: 24px;
    }

    .content-body {
        font-size: 15px;
        line-height: 1.8;
    }

    .article-card-meta a {
        margin-left: 0;
    }
}

/* Mobile offcanvas menu dari admin area */
body.mobile-menu-open {
    overflow: hidden;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(15, 23, 42, .48);
    backdrop-filter: blur(2px);
}

.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    width: min(86vw, 360px);
    height: 100dvh;
    padding: 18px;
    background: #fff;
    border-radius: 22px 0 0 22px;
    box-shadow: -22px 0 50px rgba(15, 23, 42, .22);
    transform: translateX(104%);
    transition: transform .26s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-drawer.is-open {
    transform: translateX(0);
}

.mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 4px 0 16px;
    border-bottom: 1px solid #eef2f7;
}

.mobile-menu-brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.mobile-menu-brand img {
    display: block;
    width: auto;
    max-width: 185px;
    height: 42px;
    object-fit: contain;
}

.mobile-menu-brand strong {
    font-size: 19px;
    font-weight: 900;
    color: #1f2937;
}

.mobile-menu-close {
    width: 40px;
    height: 40px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f9fafb;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.mobile-menu-nav {
    display: grid;
    gap: 18px;
    padding: 18px 0 8px;
}

.mobile-menu-section {
    display: grid;
    gap: 8px;
}

.mobile-menu-label {
    margin: 0 0 3px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid #eef2f7;
    border-radius: 15px;
    background: #fff;
    color: #1f2937;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .04);
}

.mobile-menu-link i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 14px;
    flex: 0 0 auto;
}

.mobile-menu-link span {
    min-width: 0;
    flex: 1 1 auto;
}

.mobile-menu-link em {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.mobile-menu-link:hover,
.mobile-menu-link.is-active {
    border-color: rgba(134, 210, 63, .65);
    background: #f5fee7;
    color: #3f7f1f;
}

.mobile-menu-link:hover i,
.mobile-menu-link.is-active i {
    background: #86d23f;
    color: #fff;
}

@media (min-width: 769px) {
    .mobile-menu-overlay,
    .mobile-menu-drawer {
        display: none !important;
    }
}

/* Admin Kelola Menu */
.admin-menu-icon-preview,
.menu-icon-live-preview {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #f1f5f9;
    color: #2563eb;
    margin-right: 8px;
}

.menu-icon-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 720px;
}

.menu-icon-input-row input {
    flex: 1 1 auto;
}

.menu-icon-live-preview {
    margin-right: 0;
    flex: 0 0 auto;
    border: 1px solid #e5e7eb;
}

.menu-icon-live-preview.is-invalid {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.menu-mini-badge,
.menu-location-chip {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.menu-mini-badge {
    margin-left: 6px;
    background: #fef3c7;
    color: #92400e;
}

.menu-location-chip {
    margin: 2px;
    background: #eef2ff;
    color: #3730a3;
}

/* Home Banner Slider dari Admin Area */
.home-banner-slider {
    position: relative;
    width: min(100% - 32px, 1120px);
    aspect-ratio: 1080 / 310;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0;
    background: #f1f5f9;
    box-shadow: none;
}

.home-banner-track,
.home-banner-slide,
.home-banner-slide picture,
.home-banner-slide-image {
    width: 100%;
    height: 100%;
}

.home-banner-track {
    position: relative;
}

.home-banner-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
    transform: scale(1.015);
}

.home-banner-slide.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    z-index: 2;
}

.home-banner-slide picture,
.home-banner-image-link,
.home-banner-slide-image {
    display: block;
}

.home-banner-image-link {
    width: 100%;
    height: 100%;
    color: inherit;
}

.home-banner-slide-image {
    object-fit: cover;
}

.home-banner-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(15, 23, 42, .58) 0%, rgba(15, 23, 42, .22) 43%, rgba(15, 23, 42, .04) 100%);
    pointer-events: none;
}

.home-banner-slide.is-image-only::after {
    display: none;
}

.home-banner-content {
    position: absolute;
    left: clamp(22px, 5vw, 58px);
    top: 50%;
    z-index: 3;
    width: min(520px, 58%);
    transform: translateY(-50%);
    color: #ffffff;
}

.home-banner-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin-bottom: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(134, 210, 63, .95);
    color: #16340b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-banner-content h2 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(26px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -.04em;
    text-shadow: 0 8px 20px rgba(15, 23, 42, .24);
}

.home-banner-content p {
    max-width: 460px;
    margin: 0 0 17px;
    color: rgba(255, 255, 255, .92);
    font-size: 16px;
    line-height: 1.55;
}

.home-banner-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .2);
}

.home-banner-cta:hover {
    background: #86d23f;
    color: #16340b;
}

.home-banner-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
}

.home-banner-prev {
    left: 16px;
}

.home-banner-next {
    right: 16px;
}

.home-banner-nav:hover {
    background: #86d23f;
    color: #16340b;
}

.home-banner-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(15, 23, 42, .24);
    transform: translateX(-50%);
    backdrop-filter: blur(4px);
}

.home-banner-dot {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    padding: 0;
    cursor: pointer;
}

.home-banner-dot.is-active {
    width: 24px;
    background: #86d23f;
}

.admin-banner-thumb {
    display: block;
    width: 150px;
    height: 54px;
    object-fit: cover;
    border: 1px solid #e6ebf3;
    border-radius: 10px;
    background: #f8fafc;
}

.admin-banner-current-image {
    margin-bottom: 10px;
}

.admin-banner-current-image img {
    display: block;
    width: min(100%, 420px);
    max-height: 150px;
    object-fit: cover;
    border: 1px solid #e6ebf3;
    border-radius: 12px;
    background: #f8fafc;
}

.admin-banner-current-image.is-mobile img {
    width: min(100%, 220px);
    max-height: 180px;
}

.admin-banner-current-image span {
    display: block;
    margin-top: 6px;
    color: #687386;
    font-size: 13px;
}

@media (max-width: 768px) {
    .home-banner-slider {
        width: 100%;
        aspect-ratio: 16 / 7;
        border-radius: 0;
    }

    .home-banner-content {
        left: 20px;
        width: min(78%, 360px);
    }

    .home-banner-badge {
        min-height: 21px;
        margin-bottom: 7px;
        padding: 3px 8px;
        font-size: 9px;
    }

    .home-banner-content h2 {
        max-width: 270px;
        margin-bottom: 6px;
        font-size: clamp(21px, 7vw, 30px);
    }

    .home-banner-content p {
        max-width: 260px;
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 1.42;
    }

    .home-banner-cta {
        min-height: 35px;
        padding: 8px 12px;
        font-size: 13px;
    }

    .home-banner-nav {
        display: none;
    }

    .home-banner-dots {
        bottom: 10px;
        gap: 6px;
        padding: 5px 7px;
    }
}

@media (max-width: 420px) {
    .home-banner-slider {
        aspect-ratio: 16 / 7;
    }

    .home-banner-content {
        width: min(82%, 320px);
    }

    .home-banner-content h2 {
        max-width: 238px;
        font-size: 22px;
    }

    .home-banner-content p {
        max-width: 230px;
        font-size: 12px;
    }
}

/* Admin - Image Optimization */
.admin-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-list {
    display: grid;
    gap: 10px;
}

.settings-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
}

.settings-list span {
    color: #475569;
    font-size: 14px;
}

.settings-list strong {
    color: #0f172a;
    font-size: 14px;
    text-align: right;
}

.admin-badge-danger {
    color: #991b1b;
    background: #fee2e2;
}

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
}

.toggle-row span {
    display: grid;
    gap: 4px;
}

.toggle-row small {
    color: #64748b;
    line-height: 1.35;
}

.toggle-row input[type="checkbox"],
.admin-check-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #16a34a;
}

.admin-check-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    font-weight: 700;
    color: #0f172a;
}

.input-sm {
    max-width: 110px;
    display: inline-block;
}

@media (max-width: 780px) {
    .admin-grid-2 {
        grid-template-columns: 1fr;
    }

    .settings-list > div,
    .toggle-row {
        align-items: flex-start;
    }
}

/* Admin - Image Optimization responsive refinement */
.image-optimizer-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.image-optimizer-table .admin-table {
    width: 100%;
}

.image-optimizer-table .form-control {
    width: 100%;
}

.optimizer-number-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.optimizer-number-field span {
    color: #475569;
    font-weight: 700;
}

@media (max-width: 780px) {
    .admin-grid-2,
    .admin-card,
    .admin-form,
    .image-optimizer-table,
    .settings-list,
    .form-grid,
    .form-grid-3 {
        min-width: 0;
    }

    .settings-list > div {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 8px 12px;
    }

    .settings-list span,
    .settings-list strong {
        min-width: 0;
        word-break: break-word;
    }

    .toggle-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .image-optimizer-table {
        overflow: visible;
    }

    .image-optimizer-table .admin-table,
    .image-optimizer-table .admin-table tbody,
    .image-optimizer-table .admin-table tr,
    .image-optimizer-table .admin-table td {
        display: block;
        width: 100%;
    }

    .image-optimizer-table .admin-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .image-optimizer-table .admin-table tr {
        margin-bottom: 12px;
        padding: 14px;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .04);
    }

    .image-optimizer-table .admin-table tr:last-child {
        margin-bottom: 0;
    }

    .image-optimizer-table .admin-table td {
        padding: 0;
        border: 0;
    }

    .image-optimizer-table .admin-table td:first-child {
        margin-bottom: 12px;
        color: #0f172a;
        font-size: 16px;
        font-weight: 900;
    }

    .image-optimizer-table .admin-table td[data-label] {
        margin-top: 10px;
    }

    .image-optimizer-table .admin-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 7px;
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .image-optimizer-table .input-sm,
    .optimizer-number-field {
        width: 100%;
        max-width: none;
    }

    .image-optimizer-table .input-sm {
        min-height: 46px;
    }

    .optimizer-number-field span {
        flex: 0 0 auto;
    }

    .image-optimizer-form .admin-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin: 18px -14px 0;
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid #e5e7eb;
        background: rgba(248, 250, 252, .96);
        backdrop-filter: blur(10px);
    }

    .image-optimizer-form .admin-form-actions .btn {
        width: 100%;
        min-height: 46px;
    }
}

@media (max-width: 420px) {
    .settings-list > div,
    .toggle-row,
    .admin-check-card,
    .image-optimizer-table .admin-table tr {
        border-radius: 14px;
    }

    .image-optimizer-table .admin-table tr {
        padding: 13px;
    }
}

/* Admin - Image Optimization real mobile layout fix */
.image-optimizer-form,
.image-optimizer-form * {
    box-sizing: border-box;
}

.optimizer-module-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.optimizer-module-card {
    min-width: 0;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.optimizer-module-card__header h3 {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
}

.optimizer-module-card__header p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.optimizer-module-card__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.optimizer-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.optimizer-field > span:first-child {
    color: #475569;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.optimizer-field .form-control,
.optimizer-number-field .form-control {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.optimizer-number-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.optimizer-number-field em {
    color: #475569;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .optimizer-module-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .image-optimizer-form {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .image-optimizer-form .admin-card {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .image-optimizer-form .form-grid,
    .image-optimizer-form .form-grid-3 {
        grid-template-columns: 1fr !important;
    }

    .optimizer-module-card {
        padding: 14px;
        border-radius: 16px;
    }

    .optimizer-module-card__fields {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .optimizer-field .form-control,
    .optimizer-number-field .form-control {
        min-height: 46px;
        font-size: 16px;
    }

    .optimizer-number-field {
        grid-template-columns: minmax(0, 1fr) 28px;
    }

    .image-optimizer-form .admin-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 4;
        margin: 18px -10px 0;
        padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
        border-top: 1px solid #e5e7eb;
        background: rgba(248, 250, 252, .96);
        backdrop-filter: blur(10px);
    }

    .image-optimizer-form .admin-form-actions .btn {
        width: 100%;
        min-height: 46px;
        justify-content: center;
    }
}

/* Cart Popup Modern V2 */
.cart-popup-overlay.site-cart-popup[hidden] {
    display: none !important;
}

.cart-popup-overlay.site-cart-popup {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.66);
    touch-action: none;
}

.cart-popup-dialog.cart-popup-modern {
    width: min(680px, 100%);
    max-height: min(720px, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.34);
    touch-action: auto;
}

.cart-popup-modern .cart-popup-header {
    min-height: 74px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #eef1f5;
    background: #ffffff;
    flex-shrink: 0;
}

.cart-popup-title-wrap {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.cart-popup-modern .cart-popup-header h2 {
    margin: 0;
    color: #242b36;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.cart-popup-count-label {
    color: #7b8494;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 600;
}

.cart-popup-count-label[hidden] {
    display: none !important;
}

.cart-popup-modern .cart-popup-close {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 14px;
    background: #f4f6f9;
    color: #4b5563;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.cart-popup-modern .cart-popup-close:hover,
.cart-popup-modern .cart-popup-close:focus-visible {
    background: #eef2f7;
    color: #111827;
    transform: translateY(-1px);
}

.cart-popup-modern .cart-popup-scrollarea,
.cart-popup-modern .cart-popup-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: auto;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.cart-popup-modern .cart-popup-scrollarea::-webkit-scrollbar {
    width: 8px;
}

.cart-popup-modern .cart-popup-scrollarea::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.38);
}

.cart-popup-modern .cart-popup-list {
    min-height: 0;
    display: grid;
    gap: 12px;
    padding: 18px 20px 18px;
    overflow: visible;
    max-height: none;
}

.cart-popup-modern .cart-popup-list[hidden],
.cart-popup-modern .cart-popup-list.is-hidden {
    display: none !important;
}

.cart-popup-modern .cart-popup-item {
    position: relative;
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 14px;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.cart-popup-item-media {
    width: 88px;
    min-width: 0;
}

.cart-popup-modern .cart-popup-item-image {
    width: 88px;
    height: 76px;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    background: #eef2f7;
}

.cart-popup-modern .cart-popup-item-image[hidden] {
    display: none !important;
}

.cart-popup-modern .cart-popup-item-info {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.cart-popup-item-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.cart-popup-item-title {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cart-popup-modern .cart-popup-item-info strong,
.cart-popup-item-title strong {
    color: #232b36;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.cart-popup-modern .cart-popup-item-info span,
.cart-popup-item-title span {
    color: #697386;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}

.cart-popup-price-wrap {
    display: grid;
    justify-items: start;
    gap: 4px;
}

.cart-popup-modern .cart-popup-item-info b,
.cart-popup-price-wrap b {
    color: #d33c68;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}

.cart-popup-modern .cart-popup-discount-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #8b95a5;
    font-size: 13px;
    line-height: 1.2;
}

.cart-popup-modern .cart-popup-discount-line span {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.cart-popup-modern .cart-popup-discount-line em {
    min-height: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #d93650;
    color: #ffffff;
    padding: 0 7px;
    font-style: normal;
    font-size: 12px;
    font-weight: 800;
}

.cart-popup-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.cart-popup-subtotal {
    color: #8b95a5;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
}

.cart-popup-modern .cart-popup-qty {
    min-height: 40px;
    display: inline-grid;
    grid-template-columns: 42px 48px 42px;
    border-radius: 13px;
    overflow: hidden;
    background: #f1f4f8;
    box-shadow: inset 0 0 0 1px #edf1f5;
}

.cart-popup-modern .cart-popup-qty button,
.cart-popup-modern .cart-popup-qty span {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #2f3745;
    font-size: 16px;
    line-height: 1;
}

.cart-popup-modern .cart-popup-qty button {
    background: #eef2f7;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.cart-popup-modern .cart-popup-qty button:hover:not(:disabled),
.cart-popup-modern .cart-popup-qty button:focus-visible:not(:disabled) {
    background: #e3ebf4;
    color: #111827;
}

.cart-popup-modern .cart-popup-qty button:disabled {
    color: #b7bdc8;
    cursor: not-allowed;
}

.cart-popup-modern .cart-popup-qty span {
    background: #ffffff;
    font-weight: 800;
}

.cart-popup-modern .cart-popup-remove {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: #fff1f3;
    color: #d93650;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cart-popup-modern .cart-popup-remove:hover,
.cart-popup-modern .cart-popup-remove:focus-visible {
    background: #ffe1e6;
    transform: translateY(-1px);
}

.cart-popup-modern .cart-popup-message {
    margin: 0 20px 18px;
    border-radius: 12px;
    background: #fff7ed;
    color: #9a3412;
    padding: 11px 13px;
    font-size: 14px;
    line-height: 1.45;
}

.cart-popup-modern .cart-popup-message.is-error {
    background: #fef2f2;
    color: #b91c1c;
}

.cart-popup-modern .cart-popup-empty {
    min-height: 260px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 36px 22px;
    color: #667085;
    text-align: center;
}

.cart-popup-modern .cart-popup-empty[hidden],
.cart-popup-modern .cart-popup-empty.is-hidden,
.cart-popup-modern .cart-popup-footer[hidden],
.cart-popup-modern .cart-popup-footer.is-hidden,
.cart-popup-modern .cart-popup-message[hidden],
.cart-popup-modern .cart-popup-message.is-hidden,
.cart-popup-modern .cart-popup-saving-row[hidden],
.cart-popup-modern .cart-popup-saving-row.is-hidden {
    display: none !important;
}

.cart-popup-modern .cart-popup-empty i {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: #f1f6ec;
    color: #7ac943;
    font-size: 26px;
}

.cart-popup-modern .cart-popup-empty strong {
    color: #273142;
    font-size: 18px;
    font-weight: 800;
}

.cart-popup-modern .cart-popup-empty span {
    max-width: 270px;
    color: #697386;
    font-size: 14px;
    line-height: 1.45;
}

.cart-popup-empty-action {
    min-height: 44px;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #86d23f;
    border-radius: 12px;
    background: #86d23f;
    color: #ffffff;
    padding: 0 18px;
    font-weight: 800;
    cursor: pointer;
}

.cart-popup-footer {
    flex: 0 0 auto;
    border-top: 1px solid #eef1f5;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.06);
    padding: 14px 20px 18px;
}

.cart-popup-modern .cart-popup-summary {
    display: grid;
    gap: 7px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    color: #2b3442;
    font-size: 14px;
}

.cart-popup-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.cart-popup-summary-row span {
    color: #5d6677;
    font-weight: 700;
}

.cart-popup-modern .cart-popup-summary strong,
.cart-popup-summary-row strong {
    color: #d33c68;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.cart-popup-saving-row strong {
    color: #16a34a;
    font-size: 15px;
}

.cart-popup-modern .cart-popup-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0;
}

.cart-popup-modern .cart-popup-secondary,
.cart-popup-modern .cart-popup-primary {
    min-height: 52px;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: none;
}

.cart-popup-modern .cart-popup-secondary {
    border: 1px solid #86d23f;
    background: #ffffff;
    color: #70bd34;
}

.cart-popup-modern .cart-popup-primary {
    border: 1px solid #86d23f;
    background: #86d23f;
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(134, 210, 63, 0.28);
}

.cart-popup-modern .cart-popup-primary.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
}

@media (max-width: 768px) {
    .cart-popup-overlay.site-cart-popup {
        align-items: center;
        padding: 12px 10px;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .cart-popup-dialog.cart-popup-modern {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 16px;
    }

    .cart-popup-modern .cart-popup-header {
        min-height: 66px;
        padding: 13px 18px;
    }

    .cart-popup-modern .cart-popup-header h2 {
        font-size: 22px;
    }

    .cart-popup-modern .cart-popup-list {
        gap: 10px;
        padding: 14px 14px 14px;
    }

    .cart-popup-modern .cart-popup-item {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
        padding: 12px;
        border-radius: 14px;
    }

    .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 78px;
    }

    .cart-popup-modern .cart-popup-item-image {
        height: 66px;
        border-radius: 10px;
    }

    .cart-popup-modern .cart-popup-item-info strong,
    .cart-popup-item-title strong {
        font-size: 16px;
    }

    .cart-popup-modern .cart-popup-item-info span,
    .cart-popup-item-title span {
        font-size: 13px;
    }

    .cart-popup-modern .cart-popup-item-info b,
    .cart-popup-price-wrap b {
        font-size: 17px;
    }

    .cart-popup-item-bottom {
        align-items: flex-end;
        gap: 8px;
    }

    .cart-popup-subtotal {
        display: none;
    }

    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 40px 46px 40px;
        min-height: 40px;
    }

    .cart-popup-modern .cart-popup-message {
        margin: 0 14px 14px;
    }

    .cart-popup-footer {
        padding: 12px 14px max(14px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 390px) {
    .cart-popup-overlay.site-cart-popup {
        padding-left: 7px;
        padding-right: 7px;
    }

    .cart-popup-dialog.cart-popup-modern {
        max-height: calc(100dvh - 20px);
        border-radius: 14px;
    }

    .cart-popup-modern .cart-popup-header h2 {
        font-size: 20px;
    }

    .cart-popup-modern .cart-popup-close {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .cart-popup-modern .cart-popup-list {
        padding-left: 10px;
        padding-right: 10px;
    }

    .cart-popup-modern .cart-popup-item {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 72px;
    }

    .cart-popup-modern .cart-popup-item-image {
        height: 61px;
    }

    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 36px 42px 36px;
    }

    .cart-popup-modern .cart-popup-actions {
        gap: 9px;
    }

    .cart-popup-modern .cart-popup-secondary,
    .cart-popup-modern .cart-popup-primary {
        min-height: 48px;
        font-size: 13px;
    }
}


/* Cart Popup Stable V3 - perbaikan konflik CSS grid lama */




.cart-popup-dialog.cart-popup-modern {
    width: min(680px, 100%);
    max-height: min(720px, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 90px rgba(15, 23, 42, 0.34);
}

.cart-popup-modern .cart-popup-header {
    flex: 0 0 auto;
    min-height: 72px;
    padding: 16px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #eef1f5;
    background: #fff;
}

.cart-popup-modern .cart-popup-scrollarea,
.cart-popup-modern .cart-popup-body {
    display: block !important;
    grid-template-columns: none !important;
    align-items: initial !important;
    gap: 0 !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: auto;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}





.cart-popup-modern .cart-popup-list {
    display: grid;
    gap: 12px;
    min-height: 0;
    max-height: none;
    padding: 18px 20px;
    margin: 0;
    overflow: visible;
}



.cart-popup-modern .cart-popup-item {
    position: relative;
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.cart-popup-modern .cart-popup-item-media,
.cart-popup-modern .cart-popup-item-image {
    width: 88px;
}

.cart-popup-modern .cart-popup-item-media {
    min-width: 0;
}

.cart-popup-modern .cart-popup-item-image {
    height: 76px;
    display: block;
    border-radius: 12px;
    object-fit: cover;
    background: #eef2f7;
}



.cart-popup-modern .cart-popup-item-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.cart-popup-modern .cart-popup-item-title {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cart-popup-modern .cart-popup-item-title strong,
.cart-popup-modern .cart-popup-item-info strong {
    color: #232b36;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.cart-popup-modern .cart-popup-item-title span,
.cart-popup-modern .cart-popup-item-info span {
    color: #697386;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}

.cart-popup-modern .cart-popup-price-wrap {
    display: grid;
    justify-items: start;
    gap: 4px;
}

.cart-popup-modern .cart-popup-price-wrap b,
.cart-popup-modern .cart-popup-item-info b {
    color: #d33c68;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}







.cart-popup-modern .cart-popup-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 2px;
}

.cart-popup-modern .cart-popup-subtotal {
    color: #8b95a5;
    font-size: 12px;
    line-height: 1.25;
    font-weight: 700;
}

.cart-popup-modern .cart-popup-qty {
    min-height: 40px;
    display: inline-grid !important;
    grid-template-columns: 42px 48px 42px;
    border-radius: 13px;
    overflow: hidden;
    background: #f1f4f8;
    box-shadow: inset 0 0 0 1px #edf1f5;
}

.cart-popup-modern .cart-popup-qty button,
.cart-popup-modern .cart-popup-qty span {
    min-width: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    color: #2f3745;
    font-size: 16px;
    line-height: 1;
}

.cart-popup-modern .cart-popup-qty button {
    position: relative;
    z-index: 2;
    background: #eef2f7;
    cursor: pointer;
    pointer-events: auto;
}

.cart-popup-modern .cart-popup-qty span {
    background: #fff;
    font-weight: 800;
}

.cart-popup-modern .cart-popup-remove {
    position: relative;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 12px;
    background: #fff1f3;
    color: #d93650;
    font-size: 16px;
    cursor: pointer;
    pointer-events: auto;
}



.cart-popup-modern .cart-popup-footer {
    flex: 0 0 auto;
    border-top: 1px solid #eef1f5;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.06);
    padding: 14px 20px 18px;
}

.cart-popup-modern .cart-popup-summary {
    display: grid;
    gap: 7px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.cart-popup-modern .cart-popup-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}



.cart-popup-modern .cart-popup-secondary,
.cart-popup-modern .cart-popup-primary {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
}

.cart-popup-modern .cart-popup-secondary {
    border: 1px solid #86d23f;
    background: #fff;
    color: #70bd34;
}

.cart-popup-modern .cart-popup-primary {
    border: 1px solid #86d23f;
    background: #86d23f;
    color: #fff;
    box-shadow: 0 12px 24px rgba(134, 210, 63, 0.28);
}

@media (max-width: 768px) {
    

    

    .cart-popup-modern .cart-popup-list {
        gap: 10px;
        padding: 14px;
    }

    

    .cart-popup-modern .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 78px;
    }

    

    .cart-popup-modern .cart-popup-subtotal {
        display: none;
    }

    

    .cart-popup-modern .cart-popup-footer {
        padding: 12px 14px max(14px, env(safe-area-inset-bottom));
    }
}

@media (max-width: 390px) {
    

    .cart-popup-modern .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 72px;
    }

    

    
}

/* Cart Popup Qty Input V1 - input manual jumlah produk */
.cart-popup-modern .cart-popup-qty {
    grid-template-columns: 42px 56px 42px !important;
}

.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: #ffffff;
    color: #2f3745;
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    pointer-events: auto;
}

.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input::-webkit-outer-spin-button,
.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input:focus {
    box-shadow: inset 0 0 0 2px rgba(134, 210, 63, 0.42);
}

.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input:disabled {
    opacity: 0.62;
    cursor: wait;
}

@media (max-width: 768px) {
    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 40px 54px 40px !important;
    }
}

@media (max-width: 390px) {
    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 36px 50px 36px !important;
    }
}

/* Cart Popup Compact Horizontal V1 - hemat ruang untuk order banyak */
.cart-popup-modern .cart-popup-list {
    gap: 9px !important;
    padding: 12px 16px !important;
}

.cart-popup-modern .cart-popup-item {
    grid-template-columns: 78px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.045) !important;
}

.cart-popup-modern .cart-popup-item-media,
.cart-popup-modern .cart-popup-item-image {
    width: 78px !important;
}

.cart-popup-modern .cart-popup-item-image {
    height: 58px !important;
    border-radius: 10px !important;
}

.cart-popup-modern .cart-popup-item-info {
    gap: 5px !important;
}

.cart-popup-modern .cart-popup-item-top {
    display: block !important;
}

.cart-popup-modern .cart-popup-item-title {
    gap: 1px !important;
}

.cart-popup-modern .cart-popup-item-title strong,
.cart-popup-modern .cart-popup-item-info strong {
    font-size: 16px !important;
    line-height: 1.2 !important;
}

.cart-popup-modern .cart-popup-item-title span,
.cart-popup-modern .cart-popup-item-info span {
    font-size: 13px !important;
    line-height: 1.25 !important;
}

.cart-popup-item-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.cart-popup-modern .cart-popup-price-wrap {
    min-width: 0;
    display: block !important;
}

.cart-popup-modern .cart-popup-price-wrap b,
.cart-popup-modern .cart-popup-item-info b {
    font-size: 16px !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

.cart-popup-modern .cart-popup-discount-line,
.cart-popup-modern .cart-popup-subtotal,
.cart-popup-modern .cart-popup-saving-row {
    display: none !important;
}

.cart-popup-modern .cart-popup-item-bottom {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 0 !important;
}

.cart-popup-modern .cart-popup-qty {
    min-height: 34px !important;
    grid-template-columns: 34px 44px 34px !important;
    border-radius: 11px !important;
}

.cart-popup-modern .cart-popup-qty button,
.cart-popup-modern .cart-popup-qty span,
.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
    min-height: 34px !important;
    font-size: 14px !important;
}

.cart-popup-modern .cart-popup-remove {
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
}

.cart-popup-modern .cart-popup-footer {
    padding: 10px 16px 14px !important;
}

.cart-popup-modern .cart-popup-summary {
    margin-bottom: 10px !important;
}

.cart-popup-modern .cart-popup-summary-row span {
    font-size: 14px !important;
}

.cart-popup-modern .cart-popup-summary strong,
.cart-popup-summary-row strong {
    font-size: 18px !important;
}

.cart-popup-modern .cart-popup-actions {
    gap: 10px !important;
}

.cart-popup-modern .cart-popup-secondary,
.cart-popup-modern .cart-popup-primary {
    min-height: 46px !important;
}

@media (max-width: 768px) {
    .cart-popup-modern .cart-popup-header {
        min-height: 64px !important;
        padding: 12px 16px !important;
    }

    .cart-popup-modern .cart-popup-list {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .cart-popup-modern .cart-popup-item {
        grid-template-columns: 72px minmax(0, 1fr) !important;
        gap: 10px !important;
        padding: 9px 10px !important;
    }

    .cart-popup-modern .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 72px !important;
    }

    .cart-popup-modern .cart-popup-item-image {
        height: 54px !important;
    }

    .cart-popup-modern .cart-popup-item-title strong,
    .cart-popup-modern .cart-popup-item-info strong {
        font-size: 15px !important;
    }

    .cart-popup-modern .cart-popup-item-title span,
    .cart-popup-modern .cart-popup-item-info span {
        font-size: 12.5px !important;
    }

    .cart-popup-modern .cart-popup-price-wrap b,
    .cart-popup-modern .cart-popup-item-info b {
        font-size: 15px !important;
    }

    .cart-popup-item-line {
        gap: 8px;
    }

    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 32px 42px 32px !important;
        min-height: 34px !important;
    }

    .cart-popup-modern .cart-popup-remove {
        width: 34px !important;
        height: 34px !important;
    }

    .cart-popup-modern .cart-popup-footer {
        padding: 9px 12px max(12px, env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 430px) {
    .cart-popup-modern .cart-popup-item {
        grid-template-columns: 64px minmax(0, 1fr) !important;
        gap: 9px !important;
    }

    .cart-popup-modern .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 64px !important;
    }

    .cart-popup-modern .cart-popup-item-image {
        height: 49px !important;
    }

    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 30px 38px 30px !important;
    }

    .cart-popup-modern .cart-popup-qty button,
    .cart-popup-modern .cart-popup-qty span,
    .cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
        min-height: 32px !important;
    }

    .cart-popup-modern .cart-popup-remove {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 360px) {
    .cart-popup-item-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .cart-popup-modern .cart-popup-item-bottom {
        align-self: stretch;
        justify-content: space-between !important;
        width: 100%;
    }
}


/* Cart Popup Auto Height V1 - tinggi popup mengikuti jumlah item */
.cart-popup-dialog.cart-popup-modern {
    height: auto !important;
    min-height: 0 !important;
    max-height: min(720px, calc(100dvh - 32px)) !important;
}

.cart-popup-modern .cart-popup-scrollarea,
.cart-popup-modern .cart-popup-body {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: min(520px, calc(100dvh - 218px)) !important;
}

.cart-popup-modern .cart-popup-list {
    min-height: 0 !important;
}

.cart-popup-modern .cart-popup-footer {
    flex: 0 0 auto !important;
}

@media (max-width: 768px) {
    .cart-popup-dialog.cart-popup-modern {
        height: auto !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .cart-popup-modern .cart-popup-scrollarea,
    .cart-popup-modern .cart-popup-body {
        flex: 0 1 auto !important;
        max-height: calc(100dvh - 202px) !important;
    }
}

@media (max-width: 430px) {
    .cart-popup-dialog.cart-popup-modern {
        max-height: calc(100dvh - 18px) !important;
    }

    .cart-popup-modern .cart-popup-scrollarea,
    .cart-popup-modern .cart-popup-body {
        max-height: calc(100dvh - 194px) !important;
    }
}


/* Cart Popup Compact Spacing Fix V1 - rapikan jarak dan sejajarkan nama produk */
.cart-popup-modern .cart-popup-list {
    gap: 7px !important;
    padding: 9px 14px !important;
}

.cart-popup-modern .cart-popup-item {
    align-items: start !important;
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 9px !important;
    padding: 8px 9px !important;
    border-radius: 13px !important;
}

.cart-popup-modern .cart-popup-item-media,
.cart-popup-modern .cart-popup-item-image {
    width: 66px !important;
}

.cart-popup-modern .cart-popup-item-image {
    height: 50px !important;
    border-radius: 9px !important;
}

.cart-popup-modern .cart-popup-item-info {
    align-self: start !important;
    gap: 4px !important;
    padding-top: 0 !important;
}

.cart-popup-modern .cart-popup-item-top {
    line-height: 1 !important;
}

.cart-popup-modern .cart-popup-item-title {
    gap: 0 !important;
}

.cart-popup-modern .cart-popup-item-title strong,
.cart-popup-modern .cart-popup-item-info strong {
    font-size: 15px !important;
    line-height: 1.15 !important;
}

.cart-popup-modern .cart-popup-item-title span,
.cart-popup-modern .cart-popup-item-info span {
    font-size: 12.5px !important;
    line-height: 1.15 !important;
}

.cart-popup-item-line {
    align-items: center !important;
    gap: 7px !important;
}

.cart-popup-modern .cart-popup-price-wrap b,
.cart-popup-modern .cart-popup-item-info b {
    font-size: 15px !important;
    line-height: 1.15 !important;
}

.cart-popup-modern .cart-popup-item-bottom {
    gap: 6px !important;
}

.cart-popup-modern .cart-popup-qty {
    min-height: 31px !important;
    grid-template-columns: 30px 38px 30px !important;
    border-radius: 10px !important;
}

.cart-popup-modern .cart-popup-qty button,
.cart-popup-modern .cart-popup-qty span,
.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
    min-height: 31px !important;
    font-size: 13px !important;
}

.cart-popup-modern .cart-popup-remove {
    width: 31px !important;
    height: 31px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

.cart-popup-modern .cart-popup-footer {
    padding-top: 8px !important;
}

@media (max-width: 430px) {
    .cart-popup-modern .cart-popup-list {
        gap: 6px !important;
        padding: 8px 10px !important;
    }

    .cart-popup-modern .cart-popup-item {
        grid-template-columns: 60px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    .cart-popup-modern .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 60px !important;
    }

    .cart-popup-modern .cart-popup-item-image {
        height: 45px !important;
    }

    .cart-popup-modern .cart-popup-item-title strong,
    .cart-popup-modern .cart-popup-item-info strong {
        font-size: 14.5px !important;
    }

    .cart-popup-modern .cart-popup-item-title span,
    .cart-popup-modern .cart-popup-item-info span {
        font-size: 12px !important;
    }

    .cart-popup-modern .cart-popup-price-wrap b,
    .cart-popup-modern .cart-popup-item-info b {
        font-size: 14.5px !important;
    }

    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 28px 36px 28px !important;
        min-height: 30px !important;
    }

    .cart-popup-modern .cart-popup-qty button,
    .cart-popup-modern .cart-popup-qty span,
    .cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
        min-height: 30px !important;
    }

    .cart-popup-modern .cart-popup-remove {
        width: 30px !important;
        height: 30px !important;
    }
}

@media (max-width: 360px) {
    .cart-popup-item-line {
        align-items: center !important;
        flex-direction: row !important;
        gap: 6px !important;
    }

    .cart-popup-modern .cart-popup-item-bottom {
        align-self: auto !important;
        justify-content: flex-end !important;
        width: auto !important;
    }
}

/* Cart Popup Compact Grid V2 - 3 kolom sejajar: gambar, info, qty/hapus */
.cart-popup-modern .cart-popup-list {
    gap: 6px !important;
    padding: 8px 10px !important;
}

.cart-popup-modern .cart-popup-item {
    display: grid !important;
    grid-template-columns: 60px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 8px !important;
    min-height: 0 !important;
    border-radius: 12px !important;
}

.cart-popup-modern .cart-popup-item-media,
.cart-popup-modern .cart-popup-item-image {
    width: 60px !important;
}

.cart-popup-modern .cart-popup-item-image {
    height: 45px !important;
    border-radius: 9px !important;
}

.cart-popup-modern .cart-popup-item-info {
    min-width: 0 !important;
    display: grid !important;
    gap: 1px !important;
    align-self: center !important;
    padding-top: 0 !important;
}

.cart-popup-modern .cart-popup-item-top {
    display: block !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.cart-popup-modern .cart-popup-item-title {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
}

.cart-popup-modern .cart-popup-item-title strong,
.cart-popup-modern .cart-popup-item-info strong {
    font-size: 14.5px !important;
    line-height: 1.12 !important;
    margin: 0 !important;
    font-weight: 800 !important;
}

.cart-popup-modern .cart-popup-item-title span,
.cart-popup-modern .cart-popup-item-info span {
    font-size: 12px !important;
    line-height: 1.12 !important;
    margin: 1px 0 0 !important;
}

.cart-popup-modern .cart-popup-price-wrap {
    display: block !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

.cart-popup-modern .cart-popup-price-wrap b,
.cart-popup-modern .cart-popup-item-info b {
    display: inline-block !important;
    font-size: 14.5px !important;
    line-height: 1.12 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.cart-popup-item-line {
    display: contents !important;
}

.cart-popup-modern .cart-popup-item-bottom {
    align-self: center !important;
    justify-self: end !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.cart-popup-modern .cart-popup-qty {
    min-height: 30px !important;
    grid-template-columns: 28px 34px 28px !important;
    border-radius: 9px !important;
}

.cart-popup-modern .cart-popup-qty button,
.cart-popup-modern .cart-popup-qty span,
.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
    min-height: 30px !important;
    font-size: 13px !important;
}

.cart-popup-modern .cart-popup-remove {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
}



@media (max-width: 390px) {
    .cart-popup-modern .cart-popup-item {
        grid-template-columns: 56px minmax(0, 1fr) auto !important;
        gap: 7px !important;
        padding: 7px !important;
    }

    .cart-popup-modern .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 56px !important;
    }

    .cart-popup-modern .cart-popup-item-image {
        height: 42px !important;
    }

    .cart-popup-modern .cart-popup-item-title strong,
    .cart-popup-modern .cart-popup-item-info strong,
    .cart-popup-modern .cart-popup-price-wrap b,
    .cart-popup-modern .cart-popup-item-info b {
        font-size: 14px !important;
    }

    .cart-popup-modern .cart-popup-item-title span,
    .cart-popup-modern .cart-popup-item-info span {
        font-size: 11.5px !important;
    }

    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 26px 32px 26px !important;
        min-height: 29px !important;
    }

    .cart-popup-modern .cart-popup-qty button,
    .cart-popup-modern .cart-popup-qty span,
    .cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
        min-height: 29px !important;
        font-size: 12.5px !important;
    }

    .cart-popup-modern .cart-popup-remove {
        width: 29px !important;
        height: 29px !important;
    }
}

@media (max-width: 350px) {
    .cart-popup-modern .cart-popup-item {
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        gap: 6px !important;
    }

    .cart-popup-modern .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 52px !important;
    }

    .cart-popup-modern .cart-popup-item-image {
        height: 39px !important;
    }

    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 24px 30px 24px !important;
    }

    .cart-popup-modern .cart-popup-remove {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Pop-up Aktivitas Pembelian */
.purchase-activity-popup {
    position: fixed;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
    left: 18px;
    z-index: 780;
    width: min(420px, calc(100vw - 36px));
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
    transform-origin: left bottom;
    pointer-events: none;
    will-change: opacity, transform;
    transition:
        opacity .46s ease,
        transform .56s cubic-bezier(.22, 1, .36, 1);
}

.purchase-activity-popup.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    pointer-events: auto;
}

.purchase-activity-popup.is-leaving {
    opacity: 0;
    transform: translate3d(0, 30px, 0) scale(.985);
    pointer-events: none;
    transition:
        opacity .34s ease,
        transform .42s cubic-bezier(.4, 0, .2, 1);
}

.purchase-activity-popup.is-bottom_right {
    right: 18px;
    left: auto;
}

.purchase-activity-popup.is-bottom_center {
    right: auto;
    left: 50%;
    transform: translate3d(-50%, 34px, 0) scale(.985);
    transform-origin: center bottom;
}

.purchase-activity-popup.is-bottom_center.is-visible {
    transform: translate3d(-50%, 0, 0) scale(1);
}

.purchase-activity-popup.is-bottom_center.is-leaving {
    transform: translate3d(-50%, 30px, 0) scale(.985);
}

.purchase-activity-card {
    position: relative;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 86px;
    padding: 10px 42px 10px 10px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 26px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 20px 45px rgba(15, 23, 42, .18);
    backdrop-filter: blur(10px);
}

.purchase-activity-media {
    display: block;
    width: 76px;
    height: 62px;
    overflow: hidden;
    border-radius: 18px;
    background: #eef4ff;
    text-decoration: none;
}

.purchase-activity-media img,
.purchase-activity-icon-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.purchase-activity-icon-fallback {
    display: grid;
    place-items: center;
    color: #2563eb;
    font-size: 25px;
}

.purchase-activity-body {
    min-width: 0;
}

.purchase-activity-title {
    margin: 0 0 3px;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.25;
}

.purchase-activity-title strong {
    font-weight: 900;
}

.purchase-activity-product {
    display: -webkit-box;
    overflow: hidden;
    color: #111827;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    text-decoration: none;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.purchase-activity-product:hover {
    color: #2563eb;
}

.purchase-activity-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.2;
}

.purchase-activity-verified i {
    color: #3b82f6;
    font-size: 15px;
}

.purchase-activity-close {
    position: absolute;
    top: 9px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.purchase-activity-close:hover {
    background: #f1f5f9;
    color: #334155;
}

.admin-setting-grid.four-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.purchase-popup-admin-list .badge,
.purchase-popup-table .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.purchase-popup-table .status-paid {
    background: #dcfce7;
    color: #166534;
}

.purchase-popup-table .status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.purchase-popup-table small {
    color: #64748b;
}

@media (max-width: 920px) {
    .admin-setting-grid.four-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .purchase-activity-popup,
    .purchase-activity-popup.is-bottom_right,
    .purchase-activity-popup.is-bottom_center {
        right: auto;
        left: 12px;
        bottom: max(16px, calc(env(safe-area-inset-bottom) + 16px));
        width: min(390px, calc(100vw - 96px));
        transform: translate3d(0, 32px, 0) scale(.985);
        transform-origin: left bottom;
    }

    .purchase-activity-popup.is-visible,
    .purchase-activity-popup.is-bottom_center.is-visible {
        transform: translate3d(0, 0, 0) scale(1);
    }

    .purchase-activity-popup.is-leaving,
    .purchase-activity-popup.is-bottom_center.is-leaving {
        transform: translate3d(0, 28px, 0) scale(.985);
    }

    .purchase-activity-card {
        grid-template-columns: 66px minmax(0, 1fr);
        min-height: 78px;
        gap: 10px;
        padding: 9px 34px 9px 9px;
        border-radius: 22px;
    }

    .purchase-activity-media {
        width: 66px;
        height: 56px;
        border-radius: 15px;
    }

    .purchase-activity-title {
        font-size: 14px;
    }

    .purchase-activity-product {
        font-size: 15px;
    }

    .purchase-activity-verified {
        font-size: 12px;
    }

    .purchase-activity-close {
        top: 7px;
        right: 7px;
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 620px) {
    .admin-setting-grid.four-columns {
        grid-template-columns: 1fr;
    }

    .purchase-popup-table,
    .purchase-popup-table tbody,
    .purchase-popup-table tr,
    .purchase-popup-table td {
        display: block;
        width: 100%;
    }

    .purchase-popup-table thead {
        display: none;
    }

    .purchase-popup-table tr {
        padding: 12px;
        border-bottom: 1px solid #edf1f7;
    }

    .purchase-popup-table td {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 10px;
        padding: 8px 0;
        border: 0;
    }

    .purchase-popup-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
    }
}

@media (max-width: 420px) {
    .purchase-activity-popup,
    .purchase-activity-popup.is-bottom_right,
    .purchase-activity-popup.is-bottom_center {
        width: calc(100vw - 86px);
    }

    .purchase-activity-card {
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 9px;
        padding-right: 30px;
    }

    .purchase-activity-media {
        width: 58px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .purchase-activity-popup,
    .purchase-activity-popup.is-leaving,
    .purchase-activity-popup.is-visible {
        transition: opacity .18s ease;
        transform: translate3d(0, 0, 0) scale(1);
    }

    .purchase-activity-popup.is-bottom_center,
    .purchase-activity-popup.is-bottom_center.is-leaving,
    .purchase-activity-popup.is-bottom_center.is-visible {
        transform: translate3d(-50%, 0, 0) scale(1);
    }
}


/* Admin Pop-up Pembelian: daftar manual dibuat card di mobile agar tidak gepeng seperti tabel desktop. */
.purchase-popup-mobile-list {
    display: none;
}

.purchase-popup-admin-list .status-paid {
    background: #dcfce7;
    color: #166534;
}

.purchase-popup-admin-list .status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

.purchase-popup-mobile-card {
    display: grid;
    gap: 12px;
    border: 1px solid #e8eef6;
    border-radius: 18px;
    background: #ffffff;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055);
}

.purchase-popup-mobile-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf2f7;
}

.purchase-popup-mobile-card-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.purchase-popup-mobile-label,
.purchase-popup-mobile-row span,
.purchase-popup-mobile-grid span {
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.purchase-popup-mobile-card strong {
    min-width: 0;
    color: #172033;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.purchase-popup-mobile-card small {
    color: #64748b;
    line-height: 1.45;
}

.purchase-popup-mobile-row {
    display: grid;
    gap: 4px;
}

.purchase-popup-mobile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.purchase-popup-mobile-grid > div {
    min-width: 0;
    display: grid;
    gap: 4px;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    background: #f8fafc;
    padding: 10px;
}

.purchase-popup-mobile-grid strong {
    font-size: 12px;
}

.purchase-popup-mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.purchase-popup-mobile-actions .inline-form,
.purchase-popup-mobile-actions .btn {
    width: 100%;
}

.purchase-popup-mobile-actions .btn {
    justify-content: center;
    text-align: center;
}

@media (max-width: 700px) {
    .purchase-popup-admin-list {
        padding: 16px;
    }

    .purchase-popup-admin-list .admin-card-title-row {
        display: block;
    }

    .purchase-popup-desktop-table-wrap {
        display: none;
    }

    .purchase-popup-mobile-list {
        display: grid;
        gap: 12px;
    }
}

@media (max-width: 420px) {
    .purchase-popup-mobile-grid {
        grid-template-columns: 1fr;
    }

    .purchase-popup-mobile-actions {
        grid-template-columns: 1fr;
    }
}

/* Admin Pop-up Pembelian: search produk AJAX agar ringan untuk banyak produk */
.purchase-product-search-wrap {
    position: relative;
}

.purchase-product-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 40;
    max-height: 330px;
    overflow-y: auto;
    border: 1px solid #dbe4ef;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
    padding: 6px;
}

.purchase-product-search-results[hidden] {
    display: none;
}

.purchase-product-search-option {
    width: 100%;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border: 0;
    border-radius: 12px;
    background: transparent;
    padding: 8px;
    text-align: left;
    cursor: pointer;
}

.purchase-product-search-option:hover,
.purchase-product-search-option:focus-visible {
    outline: 0;
    background: #f2f8ea;
}

.purchase-product-search-thumb,
.purchase-product-preview-image {
    width: 54px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: #edf2f7;
}

.purchase-product-search-thumb.is-placeholder,
.purchase-product-preview-image.is-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 11px;
    font-weight: 900;
}

.purchase-product-search-body {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.purchase-product-search-body strong,
.purchase-product-preview-body strong {
    display: block;
    overflow: hidden;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-product-search-body small,
.purchase-product-preview-body small {
    display: block;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-product-search-status {
    padding: 12px 10px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.purchase-product-preview {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    border: 1px solid #e5edf6;
    border-radius: 14px;
    background: #f8fbf4;
    padding: 9px;
}

.purchase-product-preview.is-empty {
    display: none;
}

.purchase-product-preview-body {
    min-width: 0;
}

@media (max-width: 620px) {
    .purchase-product-search-results {
        max-height: 280px;
    }
}

/* Konten HTML aman dari TinyMCE pada deskripsi produk. */
.detail-description-content-simple p,
.detail-description-content-simple ul,
.detail-description-content-simple ol,
.detail-description-content-simple blockquote,
.detail-description-content-simple table {
    margin: 0 0 14px;
}

.detail-description-content-simple h2,
.detail-description-content-simple h3,
.detail-description-content-simple h4 {
    margin: 22px 0 10px;
    color: #111827;
    line-height: 1.3;
}

.detail-description-content-simple h2 { font-size: 22px; }
.detail-description-content-simple h3 { font-size: 19px; }
.detail-description-content-simple h4 { font-size: 17px; }

.detail-description-content-simple a {
    color: #15803d;
    font-weight: 700;
    text-decoration: none;
}

.detail-description-content-simple a:hover {
    text-decoration: underline;
}

.detail-description-content-simple img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.detail-description-content-simple table {
    width: 100%;
    border-collapse: collapse;
}

.detail-description-content-simple th,
.detail-description-content-simple td {
    padding: 10px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.detail-description-content-simple blockquote {
    padding: 12px 16px;
    border-left: 4px solid #16a34a;
    border-radius: 12px;
    background: #f0fdf4;
    color: #14532d;
}

.content-body h4 {
    margin: 24px 0 10px;
    color: #111827;
    font-size: 18px;
    line-height: 1.3;
}

/* Admin Review Pelanggan: form tambah review manual. */
.manual-review-card {
    margin-top: 18px;
}

.manual-review-form textarea.admin-setting-control {
    min-height: 140px;
    resize: vertical;
}

.manual-review-search-wrap {
    max-width: 760px;
}

.manual-review-search-option .purchase-product-search-body strong {
    white-space: normal;
}

/* Product reviews: fitur revisi oleh pembeli via token browser. */
.review-owner-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 12px 0 18px;
    padding: 14px 16px;
    border: 1px solid #bfdbfe;
    border-radius: 16px;
    background: #eff6ff;
    color: #1e3a8a;
}

.review-owner-panel[hidden],
.review-revision-panel[hidden] {
    display: none !important;
}

.review-owner-copy strong {
    display: block;
    margin-bottom: 4px;
    color: #1e40af;
    font-size: 15px;
}

.review-owner-copy p {
    margin: 0;
    color: #1d4ed8;
    line-height: 1.6;
}

.review-owner-actions,
.review-revision-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-owner-button {
    white-space: nowrap;
}

.review-revision-panel {
    border-color: #bfdbfe;
    background: #f8fbff;
}

.product-review-form select {
    width: 100%;
    max-width: none;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    font: inherit;
    outline: 0;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.product-review-form select:focus {
    border-color: #9ca3af;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, .08);
}

.review-revision-admin-card {
    margin-bottom: 18px;
}

.review-revision-note {
    min-width: 210px;
    margin-bottom: 7px;
}

.review-revision-table .review-admin-actions form {
    display: grid;
    gap: 7px;
}

.review-revision-empty {
    margin-top: 12px;
}

@media (max-width: 768px) {
    .review-owner-panel {
        display: grid;
        align-items: start;
    }

    .review-owner-button,
    .review-revision-actions .btn {
        width: 100%;
    }
}


/* Product reviews: riwayat revisi pembeli dan admin. */
.review-owner-history {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.review-owner-history[hidden] {
    display: none !important;
}

.review-owner-history-title {
    font-weight: 700;
    color: #1e40af;
    font-size: 13px;
}

.review-owner-history-item {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #bfdbfe;
    background: #ffffff;
    color: #1f2937;
}

.review-owner-history-item.is-rejected {
    border-color: #fecaca;
    background: #fff7f7;
}

.review-owner-history-item.is-approved {
    border-color: #bbf7d0;
    background: #f7fff9;
}

.review-owner-history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.review-owner-history-head strong {
    color: #111827;
    font-size: 13px;
}

.review-owner-history-head span,
.review-owner-history-note,
.review-owner-history-preview {
    color: #4b5563;
    font-size: 13px;
    line-height: 1.5;
}

.review-owner-history-note strong,
.review-owner-history-preview span {
    color: #111827;
}

.review-revision-history-card {
    margin-bottom: 18px;
}

.review-revision-history-table .badge-approved {
    background: #dcfce7;
    color: #166534;
}

.review-revision-history-table .badge-rejected {
    background: #fee2e2;
    color: #991b1b;
}

/* Admin Review Pelanggan: kotak informasi read-only pada form edit review checkout. */
.admin-setting-control.is-readonly {
    min-height: 42px;
    background: #f9fafb;
    color: #374151;
    cursor: default;
}

/* Admin Review Pelanggan: arsip riwayat revisi review. */
.review-revision-history-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.review-revision-history-headline h2 {
    margin-bottom: 6px;
}

.review-revision-history-filter,
.review-revision-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.review-revision-archive-info {
    margin: 12px 0 14px;
}

.review-revision-archive-badge {
    display: inline-flex;
    margin-top: 6px;
}

.review-revision-history-table .badge-archived {
    background: #f3f4f6;
    color: #374151;
}

.review-revision-history-actions .btn {
    width: 100%;
    justify-content: center;
}

@media (max-width: 768px) {
    .review-revision-history-headline {
        display: grid;
    }

    .review-revision-history-filter .btn,
    .review-revision-history-actions .btn {
        width: 100%;
    }
}

.alert-info {
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    color: #1e40af;
    padding: 12px 14px;
    line-height: 1.55;
}

/* Admin Review Pelanggan: tab utama agar data review tidak tertutup fitur revisi. */
.review-admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0;
}

.review-admin-summary-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.review-admin-summary-card span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.review-admin-summary-card strong {
    color: #111827;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.review-admin-summary-card.is-pending strong,
.review-admin-summary-card.is-revision strong {
    color: #b45309;
}

.review-admin-summary-card.is-approved strong {
    color: #15803d;
}

.review-admin-summary-card.is-rejected strong {
    color: #b91c1c;
}

.review-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #f8fafc;
}

.review-admin-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    color: #334155;
    font-weight: 800;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.review-admin-tab:hover,
.review-admin-tab.is-active {
    background: #ffffff;
    color: #1d4ed8;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
}

.review-admin-tab em {
    min-width: 24px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 12px;
    font-style: normal;
    text-align: center;
}

.review-admin-tab.is-active em {
    background: #dbeafe;
    color: #1d4ed8;
}

.review-admin-tab em.is-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.review-admin-attention {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}

.review-admin-attention strong {
    color: #1e40af;
}

.review-admin-attention span {
    color: #1e3a8a;
}

.review-admin-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.review-admin-section-head h2 {
    margin-bottom: 6px;
}

.review-admin-main-card {
    margin-bottom: 18px;
}

@media (max-width: 900px) {
    .review-admin-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    /* Review admin mobile: ringkasan dan tab dibuat horizontal agar halaman tidak memanjang. */
    .review-admin-summary-grid {
        display: flex;
        gap: 8px;
        margin: 12px -6px 14px;
        padding: 0 6px 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .review-admin-summary-grid::-webkit-scrollbar,
    .review-admin-tabs::-webkit-scrollbar {
        height: 0;
    }

    .review-admin-summary-card {
        flex: 0 0 128px;
        min-height: 78px;
        padding: 11px 12px;
        border-radius: 14px;
        scroll-snap-align: start;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
    }

    .review-admin-summary-card span {
        font-size: 12px;
        line-height: 1.25;
    }

    .review-admin-summary-card strong {
        font-size: 22px;
    }

    .review-admin-tabs {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 12px -6px 16px;
        padding: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .review-admin-tab {
        flex: 0 0 auto;
        width: auto;
        min-width: 172px;
        padding: 9px 12px;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .review-admin-tab em {
        min-width: 22px;
        padding: 2px 7px;
    }

    .review-admin-section-head,
    .review-admin-attention {
        display: grid;
    }

    .review-admin-section-head .btn,
    .review-admin-attention .btn {
        width: 100%;
    }
}

/* Admin Review: pencarian dan filter server-side agar data review mudah ditemukan. */
.review-admin-search-card,
.review-search-form-inline {
    margin-bottom: 16px;
}

.review-search-headline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.review-search-headline h2 {
    margin-bottom: 6px;
}

.review-search-form {
    display: grid;
    grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)) auto;
    gap: 10px;
    align-items: end;
}

.review-search-form-inline {
    grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) auto;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #f8fafc;
}

.review-history-search-form {
    grid-template-columns: minmax(220px, 2fr) minmax(140px, 1fr) minmax(150px, 1fr) auto;
}

.review-search-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.review-search-field span {
    color: #475569;
    font-size: 12px;
    font-weight: 800;
}

.review-search-field input,
.review-search-field select {
    min-height: 42px;
}

.review-search-submit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.review-search-submit .btn {
    min-height: 42px;
}

@media (max-width: 980px) {
    .review-search-form,
    .review-search-form-inline,
    .review-history-search-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .review-search-field.is-wide,
    .review-search-submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .review-search-headline {
        display: grid;
    }

    .review-search-headline .btn {
        width: 100%;
    }

    .review-search-form,
    .review-search-form-inline,
    .review-history-search-form {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .review-search-field.is-wide,
    .review-search-submit {
        grid-column: auto;
    }

    .review-search-submit .btn {
        width: 100%;
    }
}

/* Status Toko / Toko Tutup */
.store-status-banner-wrap {
    margin-top: 14px;
    margin-bottom: 0;
}

.store-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid #fecaca;
    border-radius: 16px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(154, 52, 18, 0.08);
}

.store-status-banner i {
    flex: 0 0 auto;
    color: #dc2626;
}

.store-status-banner > span {
    min-width: 0;
    line-height: 1.5;
}

.store-status-countdown-label {
    display: inline-block;
    margin-left: 4px;
    font-weight: 900;
    white-space: nowrap;
}


.store-status-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, 0.36);
}

.store-status-modal-overlay[hidden] {
    display: none;
}

.store-status-modal {
    position: relative;
    width: min(420px, 100%);
    padding: 24px 20px 20px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    text-align: center;
}

.store-status-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #334155;
    cursor: pointer;
}

.store-status-modal-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    border-radius: 18px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 24px;
}

.store-status-modal h2 {
    margin: 0 0 6px;
    color: #111827;
    font-size: 22px;
    line-height: 1.2;
}

.store-status-modal p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.store-status-modal .store-status-modal-reason {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 12px;
    font-weight: 900;
}

.store-status-understand {
    width: 100%;
    margin-top: 18px;
    justify-content: center;
}

.store-status-modal-open {
    overflow: hidden;
}

.checkout-submit-button.is-disabled,
.checkout-submit-button:disabled {
    cursor: not-allowed;
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: none;
    opacity: 0.9;
}

.store-status-checkout-alert strong {
    color: inherit;
}

.store-status-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 18px;
    margin-bottom: 18px;
}

.store-status-current-box,
.store-status-quick-box,
.store-status-settings-box,
.store-status-history-box {
    border: 1px solid #e2e8f0;
}

.store-status-current-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.store-status-current-badge.is-open {
    background: #dcfce7;
    color: #166534;
}

.store-status-current-badge.is-closed {
    background: #fee2e2;
    color: #b91c1c;
}

.store-status-current-box h2,
.store-status-quick-box h2 {
    margin: 14px 0 8px;
    color: #0f172a;
}

.store-status-preview {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
}

.store-status-preview strong {
    display: block;
    margin-bottom: 5px;
}

.store-status-preview p {
    margin: 0;
    color: #475569;
    line-height: 1.6;
}

.store-status-preview.is-open {
    background: #f0fdf4;
    color: #166534;
}

.store-status-preview.is-closed {
    background: #fff7ed;
    color: #9a3412;
}

.store-status-inline-action {
    margin-bottom: 14px;
}

.store-status-inline-hint {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
}

.store-status-quick-close-form {
    display: grid;
    gap: 10px;
}

.btn-danger-soft {
    border: 1px solid #fecaca;
    background: #fee2e2;
    color: #991b1b;
}

.btn-danger-soft:hover {
    background: #fecaca;
    color: #7f1d1d;
}

.admin-setting-grid.three-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-readonly-box {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
}

.admin-setting-section.is-muted {
    opacity: 0.72;
}

.store-status-history-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.store-status-cleanup-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.store-status-cleanup-form .admin-setting-control {
    width: auto;
    min-width: 170px;
}

.store-status-log-table td {
    vertical-align: top;
}

.store-status-current-summary strong {
    color: #0f172a;
}

.store-status-log-table td:nth-child(6) {
    min-width: 240px;
}

@media (max-width: 980px) {
    .store-status-admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-setting-grid.three-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-status-history-heading {
        display: grid;
    }

    .store-status-cleanup-form {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .store-status-banner-wrap {
        margin-top: 10px;
    }

    .store-status-banner {
        align-items: flex-start;
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 14px;
    }

    .store-status-modal {
        padding: 22px 16px 16px;
        border-radius: 20px;
    }

    .store-status-modal h2 {
        font-size: 20px;
    }

    .admin-setting-grid.three-columns {
        grid-template-columns: 1fr;
    }

    .store-status-cleanup-form,
    .store-status-cleanup-form .admin-setting-control,
    .store-status-cleanup-form .btn,
    .store-status-inline-action .btn,
    .store-status-quick-close-form .btn {
        width: 100%;
    }

    .store-status-history-box {
        max-width: 100%;
        overflow: hidden;
    }

    .store-status-history-box .admin-table-responsive {
        max-width: 100%;
        overflow: visible;
    }

    .admin-content .store-status-log-table {
        width: 100%;
        min-width: 0; /* Override min-width tabel admin global agar riwayat tidak melebar di mobile. */
        table-layout: fixed;
    }

    .store-status-log-table,
    .store-status-log-table tbody,
    .store-status-log-table tr,
    .store-status-log-table td {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .store-status-log-table thead {
        display: none;
    }

    .store-status-log-table {
        border: 0;
        min-width: 0;
    }

    .store-status-log-table tr {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .store-status-log-table tr:last-child {
        margin-bottom: 0;
    }

    .admin-content .store-status-log-table td {
        display: grid;
        grid-template-columns: minmax(86px, 0.38fr) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        padding: 8px 0;
        border: 0;
        border-bottom: 1px dashed #e2e8f0;
        color: #334155;
        line-height: 1.45;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        min-width: 0;
        max-width: 100%;
    }

    .store-status-log-table td:last-child {
        border-bottom: 0;
    }

    .store-status-log-table td::before {
        content: attr(data-label);
        color: #64748b;
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .store-status-log-table td > * {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    .admin-content .store-status-log-table td {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .store-status-countdown-label {
        margin-left: 0;
    }
}


/* Peringatan sebelum toko tutup */
.store-status-warning-banner {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.store-status-warning-banner i {
    color: #d97706;
}

.store-status-warning-banner span {
    line-height: 1.5;
}

.store-status-warning-banner strong,
.store-status-checkout-warning strong[data-store-closing-countdown],
.store-closing-warning-countdown-text strong {
    font-weight: 900;
    white-space: nowrap;
}

.store-status-checkout-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.store-closing-warning-icon {
    background: #fef3c7;
    color: #d97706;
}

.store-closing-warning-countdown-text {
    margin-top: 12px !important;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fffbeb;
    color: #92400e !important;
    font-weight: 800;
}

.store-status-preview.is-warning {
    background: #fffbeb;
    color: #92400e;
}

.store-status-preview.is-warning p {
    color: #78350f;
}

/* Countdown buka kembali saat toko tutup */
.store-reopen-info-box {
    display: grid;
    gap: 5px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    background: #f8fafc;
    color: #334155;
    text-align: left;
}

.store-reopen-info-box span {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.store-reopen-info-box strong {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.45;
}

.store-reopen-info-box em {
    display: block;
    color: #9a3412;
    font-style: normal;
    font-weight: 800;
}

.store-reopen-info-box b,
.store-status-banner strong[data-store-reopen-countdown],
.store-status-banner strong[data-store-closing-countdown],
.store-status-checkout-alert strong[data-store-reopen-countdown],
.store-status-admin-countdown-line strong[data-store-reopen-countdown] {
    font-weight: 900;
    white-space: nowrap;
}

.store-status-admin-countdown-line {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px dashed rgba(154, 52, 18, 0.24);
}

/* Rapikan notifikasi Status Toko khusus halaman checkout */
.checkout-store-status-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 13px;
    margin: 0 0 16px;
    padding: 15px 16px;
    border: 1px solid #fecaca;
    border-radius: 18px;
    background: linear-gradient(135deg, #fff7ed, #fff1f2);
    color: #7f1d1d;
    box-shadow: 0 12px 30px rgba(127, 29, 29, 0.08);
}

.checkout-store-status-card.is-warning {
    border-color: #fde68a;
    background: linear-gradient(135deg, #fffbeb, #fff7ed);
    color: #78350f;
}

.checkout-store-status-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 19px;
}

.checkout-store-status-card.is-warning .checkout-store-status-icon {
    background: #fef3c7;
    color: #d97706;
}

.checkout-store-status-content {
    min-width: 0;
}

.checkout-store-status-title {
    display: block;
    margin-bottom: 4px;
    color: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
}

.checkout-store-status-content p {
    margin: 0;
    color: inherit;
    line-height: 1.5;
}

.checkout-store-status-meta,
.checkout-store-status-countdown {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px dashed rgba(127, 29, 29, 0.18);
    line-height: 1.45;
}

.checkout-store-status-card.is-warning .checkout-store-status-meta,
.checkout-store-status-card.is-warning .checkout-store-status-countdown {
    border-top-color: rgba(120, 53, 15, 0.18);
}

.checkout-store-status-meta span,
.checkout-store-status-countdown span {
    color: inherit;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.82;
}

.checkout-store-status-meta strong,
.checkout-store-status-countdown strong {
    color: inherit;
    font-weight: 900;
}

.checkout-store-status-countdown strong {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .checkout-store-status-card {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 11px;
        margin: 0 14px 14px;
        padding: 13px 14px;
        border-radius: 16px;
    }

    .checkout-store-status-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        font-size: 17px;
    }

    .checkout-store-status-title {
        font-size: 15px;
    }
}

/* Field alasan manual Status Toko */
.store-status-custom-reason-field[hidden] {
    display: none !important;
}

.store-status-custom-reason-field input {
    font-weight: 800;
}

/* Status Toko admin: susunan section lebih sederhana */
.store-status-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.store-status-section-nav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 13px;
    border: 1px solid #dbe5f3;
    border-radius: 999px;
    background: #ffffff;
    color: #2563eb;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.store-status-settings-simple {
    padding: 0;
    overflow: hidden;
}

.store-status-settings-simple form {
    margin: 0;
}

.store-status-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid #e6ebf3;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.store-status-section-kicker {
    display: inline-flex;
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.store-status-card-heading h2 {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    line-height: 1.2;
}

.store-status-card-heading p {
    max-width: 720px;
    margin: 8px 0 0;
    color: #64748b;
    line-height: 1.6;
}

.store-status-save-top {
    flex: 0 0 auto;
    min-width: 118px;
}

.store-status-accordion {
    border-bottom: 1px solid #e6ebf3;
    background: #ffffff;
}

.store-status-accordion:last-of-type {
    border-bottom: 0;
}

.store-status-accordion summary {
    list-style: none;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 13px;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    transition: background .18s ease;
}

.store-status-accordion summary::-webkit-details-marker {
    display: none;
}

.store-status-accordion summary:hover {
    background: #f8fafc;
}

.store-status-accordion-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 17px;
}

.store-status-accordion summary strong {
    display: block;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
}

.store-status-accordion summary small {
    display: block;
    margin-top: 4px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.store-status-accordion summary > .fa-chevron-down {
    justify-self: end;
    color: #64748b;
    transition: transform .18s ease;
}

.store-status-accordion[open] summary > .fa-chevron-down {
    transform: rotate(180deg);
}

.store-status-accordion-body {
    padding: 0 24px 22px;
    display: grid;
    gap: 14px;
}

.store-status-accordion-body .form-group {
    margin-bottom: 0;
}

.store-status-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 0;
    padding: 14px 24px;
    border-top: 1px solid #e6ebf3;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    justify-content: flex-end;
}

.store-status-sticky-actions .btn {
    min-width: 190px;
}

@media (max-width: 768px) {
    .store-status-section-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .store-status-section-nav a {
        width: 100%;
        min-width: 0;
        padding: 0 10px;
        font-size: 13px;
    }

    .store-status-card-heading {
        display: grid;
        padding: 18px;
    }

    .store-status-card-heading h2 {
        font-size: 21px;
    }

    .store-status-save-top {
        width: 100%;
    }

    .store-status-accordion summary {
        grid-template-columns: 38px minmax(0, 1fr) 20px;
        gap: 10px;
        padding: 16px 18px;
    }

    .store-status-accordion-icon {
        width: 38px;
        height: 38px;
        border-radius: 14px;
        font-size: 16px;
    }

    .store-status-accordion summary strong {
        font-size: 16px;
    }

    .store-status-accordion summary small {
        font-size: 12px;
    }

    .store-status-accordion-body {
        padding: 0 18px 18px;
    }

    .store-status-sticky-actions {
        padding: 12px 18px;
    }

    .store-status-sticky-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .store-status-section-nav {
        grid-template-columns: 1fr;
    }
}

/* Status Toko: tampilkan field jadwal hanya saat modenya dipakai */
.store-status-dependent-panel[hidden],
.store-status-mode-note[hidden] {
    display: none !important;
}

.store-status-mode-note {
    margin: 10px 0 14px;
    padding: 12px 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #eff6ff;
    color: #1e3a8a;
    line-height: 1.5;
}

.store-status-mode-note strong,
.store-status-mode-note span {
    display: block;
}

.store-status-mode-note span {
    margin-top: 2px;
    color: #475569;
}

/* Integrasi Kode Eksternal - admin */
.external-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.external-page-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
    font-weight: 700;
    cursor: pointer;
}

.external-page-option input {
    width: auto;
    margin: 0;
}

.external-code-textarea {
    min-height: 300px;
    font-family: Consolas, Monaco, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.55;
}

.external-integration-table td {
    vertical-align: top;
}

@media (max-width: 760px) {
    .external-page-grid {
        grid-template-columns: 1fr;
    }
}

/* Search Artikel Tutorial */
.article-search-wrap {
    margin-bottom: 18px;
}

.article-search-form input[type="text"] {
    min-width: 0;
}

.article-search-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(100%, 760px);
}

.article-search-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 13px;
}

.article-search-suggestions span {
    font-weight: 800;
    color: #374151;
}

.article-search-suggestions a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #d1fae5;
    border-radius: 999px;
    background: #f0fdf4;
    color: #166534;
    font-weight: 800;
    text-decoration: none;
}

.article-search-suggestions a:hover {
    background: #dcfce7;
    border-color: #86efac;
}

.search-hit {
    padding: 0 2px;
    border-radius: 4px;
    background: #fef3c7;
    color: inherit;
}

.article-search-empty {
    margin-bottom: 18px;
}

.article-search-fallback {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .05);
}

.article-search-fallback h2 {
    margin: 0 0 12px;
    font-size: 18px;
}

.article-suggestion-list {
    display: grid;
    gap: 10px;
}

.article-suggestion-list a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    color: #111827;
    font-weight: 800;
    text-decoration: none;
}

.article-suggestion-list a:hover {
    border-color: #86efac;
    color: #15803d;
}

@media (max-width: 640px) {
    .article-search-actions {
        align-items: stretch;
    }

    .article-search-suggestions {
        justify-content: flex-start;
    }

    .article-search-suggestions a {
        min-height: 28px;
        padding: 5px 9px;
        font-size: 12px;
    }
}

/* Pagination daftar produk: link HTML biasa agar aman untuk crawl SEO. */
.product-list-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.product-page-link,
.product-page-number,
.product-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid #dbe4ee;
    background: #ffffff;
    color: #334155;
    font-weight: 800;
    line-height: 1;
}

.product-page-link {
    gap: 7px;
}

.product-page-link:hover,
.product-page-number:hover {
    border-color: #86c83d;
    color: #4f9a1a;
    background: #f7fee7;
}

.product-page-number.is-active {
    border-color: #86c83d;
    background: #86c83d;
    color: #ffffff;
    cursor: default;
}

.product-page-ellipsis {
    border-color: transparent;
    background: transparent;
    color: #94a3b8;
    padding-inline: 4px;
}

@media (max-width: 520px) {
    .product-list-pagination {
        gap: 6px;
    }

    .product-page-link,
    .product-page-number,
    .product-page-ellipsis {
        min-height: 36px;
        padding: 8px 11px;
        font-size: 13px;
    }
}

/* Fitur Redirect 301 URL Lama */
.redirect-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0;
}

.redirect-filter-form {
    margin: 16px 0 20px;
}

.redirect-filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.legacy-redirect-form-box code,
.legacy-redirect-table code,
.legacy-404-table code {
    display: inline-block;
    max-width: 360px;
    padding: 3px 6px;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.06);
    overflow-wrap: anywhere;
}

.legacy-target-search {
    margin-top: 16px;
}

.legacy-target-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.legacy-target-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background: #fff;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.legacy-target-item:hover,
.legacy-target-item:focus {
    border-color: rgba(14, 165, 233, 0.65);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
    outline: none;
}

.legacy-target-item code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.legacy-target-type {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    font-size: 12px;
    font-weight: 700;
}

.legacy-target-empty {
    grid-column: 1 / -1;
    padding: 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.06);
    color: #64748b;
}

.legacy-action-cell {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.legacy-import-textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.legacy-import-sample {
    padding: 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.06);
    overflow-x: auto;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .redirect-summary-grid,
    .legacy-target-results {
        grid-template-columns: 1fr;
    }

    .legacy-action-cell {
        justify-content: flex-start;
    }
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.status-badge.status-paid {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.status-badge.status-cancelled {
    background: rgba(100, 116, 139, 0.14);
    color: #475569;
}

.admin-table-wrapper {
    overflow-x: auto;
}

.admin-table th,
.admin-table td {
    vertical-align: top;
}

/* Foto produk utama, varian, dan galeri */
.product-gallery-admin-box {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fbfdff;
}

.product-gallery-upload-list {
    display: grid;
    gap: 10px;
    margin: 12px 0;
}

.product-gallery-upload-item {
    max-width: 620px;
    padding: 12px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
}

.product-gallery-upload-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.product-gallery-add-btn {
    margin-top: 4px;
}

.product-gallery-existing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    max-width: 720px;
    margin: 12px 0;
}

.product-gallery-existing-item {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
}

.product-gallery-existing-item img,
.variant-image-preview-admin img,
.variant-table-image {
    width: 100%;
    aspect-ratio: 1.45 / 1;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
}

.product-gallery-existing-item span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #334155;
}

.product-gallery-empty-admin {
    max-width: 620px;
    margin: 12px 0;
    padding: 12px;
}

.variant-image-preview-admin {
    width: 170px;
    margin: 10px 0;
}

.variant-table-image {
    width: 70px;
    height: 48px;
    aspect-ratio: auto;
}

.muted-text {
    color: #94a3b8;
}

.detail-gallery-main-wrap {
    position: relative;
    border: 1px solid #eef2f7;
    border-radius: 7px;
    background: #f8fafc;
    overflow: hidden;
}

.detail-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #1f2937;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    cursor: pointer;
}

.detail-gallery-nav-prev {
    left: 10px;
}

.detail-gallery-nav-next {
    right: 10px;
}

.detail-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    padding-bottom: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.detail-gallery-thumb {
    flex: 0 0 auto;
    width: 74px;
    height: 52px;
    padding: 2px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
}

.detail-gallery-thumb.is-active {
    border-color: #86d23f;
}

.detail-gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 7px;
    background: #f8fafc;
}

@media (max-width: 640px) {
    .product-gallery-existing-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-gallery-upload-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-lightbox-trigger {
        min-height: 190px;
    }

    .detail-product-image {
        max-height: 360px;
    }

    .detail-gallery-nav {
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    .detail-gallery-thumb {
        width: 66px;
        height: 47px;
    }
}


/* Share produk detail: ditempatkan di heading deskripsi agar CTA checkout tetap bersih. */
.detail-share-action {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.detail-share-trigger {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d8dee8;
    border-radius: 999px;
    background: #ffffff;
    color: #4b5563;
    padding: 0 14px;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.detail-share-trigger:hover,
.detail-share-trigger:focus-visible {
    border-color: #b6c2d3;
    background: #f8fafc;
    color: #111827;
    transform: translateY(-1px);
}

.detail-share-trigger i {
    font-size: 13px;
    color: inherit;
}

body.share-modal-open {
    overflow: hidden;
}

.product-share-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(15, 23, 42, .48);
}

.product-share-overlay[hidden] {
    display: none !important;
}

.product-share-dialog {
    position: relative;
    width: min(420px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .24);
    padding: 20px;
}

.product-share-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
}

.product-share-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 42px;
    margin-bottom: 18px;
}

.product-share-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f5f9;
    color: #111827;
}

.product-share-header h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 20px;
    line-height: 1.2;
}

.product-share-header p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.product-share-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.product-share-option {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    color: #1f2937;
    padding: 0 13px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.product-share-option:hover,
.product-share-option:focus-visible {
    border-color: #b6c2d3;
    background: #f8fafc;
    transform: translateY(-1px);
}

.product-share-option i {
    width: 18px;
    text-align: center;
    font-size: 17px;
    color: #111827;
}

.product-share-qr-panel {
    margin-top: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    padding: 14px;
    text-align: center;
}

.product-share-qr-panel[hidden] {
    display: none !important;
}

.product-share-qr-panel canvas {
    width: 220px;
    height: 220px;
    max-width: 100%;
    border: 8px solid #ffffff;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.product-share-qr-panel p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 13px;
}

.product-share-status {
    min-height: 18px;
    margin: 12px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.product-share-status[data-type="success"] {
    color: #16803f;
}

.product-share-status[data-type="error"] {
    color: #b91c1c;
}

@media (max-width: 767px) {
    .product-share-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .product-share-dialog {
        width: 100%;
        max-height: calc(100vh - 22px);
        border-radius: 20px 20px 0 0;
        padding: 18px 16px 16px;
    }

    .product-share-options {
        grid-template-columns: 1fr;
    }

    .product-share-option-qr {
        display: none !important;
    }
}



/* Mobile Compact UI Home Tokodigital
   Fokus: tampilan Home lebih padat di HP tanpa mengubah struktur SEO/HTML utama. */
@media (max-width: 768px) {
    .site-header {
        border-bottom-color: #eef2f7;
    }

    .header-inner {
        min-height: 64px;
        gap: 12px;
    }

    .logo-image {
        height: 34px;
        max-width: 168px;
    }

    .logo-text {
        font-size: 18px;
    }

    .mobile-actions {
        gap: 12px;
    }

    .icon-button {
        width: 34px;
        height: 34px;
    }

    .nav-fa-cart {
        font-size: 25px;
    }

    .nav-fa-menu {
        font-size: 28px;
    }

    .icon-button em {
        top: 0;
        right: -2px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        font-size: 10px;
    }

    .home-cover {
        padding: 0;
    }

    .home-banner-slider,
    .home-cover-image-banner {
        width: 100%;
        aspect-ratio: 1080 / 310;
        border-radius: 0;
    }

    .home-banner-slide-image,
    .home-banner-image {
        object-position: center center;
    }

    .home-search-wrap {
        width: min(100% - 72px, 600px);
        margin-top: -26px;
        margin-bottom: 18px;
    }

    .home-search {
        height: 50px;
        min-height: 50px;
        border-color: #e5eaf1;
        box-shadow: 0 7px 18px rgba(15, 23, 42, 0.12);
    }

    .home-search input[type="text"],
    .home-search input {
        height: 48px;
        padding-left: 18px;
        font-size: 14px;
    }

    .home-search button {
        width: 52px;
        height: 48px;
    }

    .search-fa-icon {
        font-size: 18px;
    }

    .home-category-section {
        width: min(100% - 24px, 640px);
        margin-top: 0;
        margin-bottom: 22px;
    }

    .home-category-section .category-chips {
        justify-content: center;
        gap: 8px;
    }

    .home-category-section .category-chip {
        min-width: 0;
        padding: 9px 14px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.2px;
    }

    .home-product-section {
        margin-bottom: 28px;
    }

    .home-product-section .section-heading {
        margin-bottom: 14px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
    }

    .home-product-section .section-title-modern {
        gap: 8px;
        font-size: 20px;
        line-height: 1.15;
    }

    .home-product-section .section-title-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
        border-radius: 10px;
        font-size: 12px;
        box-shadow: none;
    }

    .home-product-section .section-link-modern {
        min-height: 30px;
        padding: 7px 11px;
        font-size: 12px;
        border-color: #bbf7d0;
        box-shadow: none;
    }

    .home-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .home-product-grid .product-card-simple {
        border-radius: 11px;
        border-color: #edf1f7;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    }

    .home-product-grid .product-image {
        aspect-ratio: 1.62 / 1;
    }

    .home-product-grid .product-card-body {
        gap: 3px !important;
        padding: 9px 10px 10px !important;
    }

    .home-product-grid .product-name {
        min-height: calc(1.35em * 2) !important;
        font-size: 15px;
        line-height: 1.35 !important;
        -webkit-line-clamp: 2;
    }

    .home-product-grid .product-price-wrap {
        margin-top: 1px !important;
        gap: 2px !important;
    }

    .home-product-grid .product-discount-line span {
        font-size: 13px;
    }

    .home-product-grid .product-discount-line b {
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1;
    }

    .home-product-grid .product-price-row {
        gap: 6px;
    }

    .home-product-grid .product-price {
        font-size: 17px !important;
        line-height: 1.15;
    }

    .home-product-grid .product-card-rating {
        gap: 3px;
        font-size: 11px;
    }

    .home-product-grid .product-card-rating i {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    .header-inner {
        min-height: 60px;
    }

    .logo-image {
        height: 31px;
        max-width: 150px;
    }

    .mobile-actions {
        gap: 10px;
    }

    .icon-button {
        width: 32px;
        height: 32px;
    }

    .nav-fa-cart {
        font-size: 24px;
    }

    .nav-fa-menu {
        font-size: 27px;
    }

    .home-search-wrap {
        width: calc(100% - 62px);
        margin-top: -24px;
        margin-bottom: 17px;
    }

    .home-search {
        height: 48px;
        min-height: 48px;
    }

    .home-search input[type="text"],
    .home-search input {
        height: 46px;
        padding-left: 16px;
        font-size: 13px;
    }

    .home-search button {
        width: 48px;
        height: 46px;
    }

    .search-fa-icon {
        font-size: 17px;
    }

    .home-category-section {
        width: calc(100% - 22px);
        margin-bottom: 20px;
    }

    .home-category-section .category-chips {
        gap: 8px 7px;
    }

    .home-category-section .category-chip {
        padding: 8px 12px;
        font-size: 12px;
    }

    .home-product-section {
        margin-bottom: 24px;
    }

    .home-product-section .section-heading {
        margin-bottom: 12px;
    }

    .home-product-section .section-title-modern {
        font-size: 18px;
    }

    .home-product-section .section-title-icon {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
        border-radius: 9px;
        font-size: 11px;
    }

    .home-product-section .section-link-modern {
        min-height: 28px;
        padding: 6px 9px;
        font-size: 11px;
    }

    .home-product-grid {
        gap: 12px;
    }

    .home-product-grid .product-card-simple {
        border-radius: 10px;
    }

    .home-product-grid .product-card-body {
        padding: 8px 9px 9px !important;
    }

    .home-product-grid .product-name {
        font-size: 14px;
    }

    .home-product-grid .product-discount-line span {
        font-size: 12px;
    }

    .home-product-grid .product-discount-line b {
        padding: 3px 5px;
        font-size: 9px;
    }

    .home-product-grid .product-price {
        font-size: 16px !important;
    }

    .home-product-grid .product-card-rating {
        font-size: 10px;
    }

    .home-product-grid .product-card-rating i {
        font-size: 13px;
    }
}

/* Mobile Compact UI Global Frontend
   Menyamakan proporsi mobile Home, detail produk, listing, artikel, halaman statis, keranjang, dan checkout. */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .container {
        width: min(100% - 24px, 1120px);
    }

    .main-content {
        overflow-x: hidden;
    }

    .site-header {
        border-bottom-color: #eef2f7;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.035);
    }

    

    

    

    

    

    

    

    

    .page-top-simple {
        padding: 18px 0 10px;
    }

    .page-top-simple h1 {
        margin-bottom: 6px;
        font-size: 23px;
        line-height: 1.2;
    }

    .page-top-simple p {
        max-width: 600px;
        margin-inline: auto;
        font-size: 14px;
        line-height: 1.55;
    }

    .home-search-wrap,
    .listing-search-wrap {
        margin-bottom: 18px;
    }

    .listing-search-wrap {
        gap: 8px;
    }

    .home-search,
    .listing-search {
        height: 50px;
        min-height: 50px;
        border-color: #e5eaf1;
        box-shadow: 0 7px 18px rgba(15, 23, 42, 0.11);
    }

    .home-search input[type="text"],
    .home-search input,
    .listing-search input[type="text"],
    .listing-search input {
        height: 48px;
        padding-left: 18px;
        font-size: 14px;
    }

    .home-search button,
    .listing-search button {
        width: 52px;
        height: 48px;
    }

    

    .category-section {
        width: min(100% - 24px, 640px);
        margin: 0 auto 22px;
    }

    .category-chips {
        justify-content: center;
        gap: 8px;
    }

    .category-chip {
        min-width: 0;
        padding: 9px 14px;
        border-radius: 7px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: .2px;
    }

    .category-breadcrumb-section {
        padding-top: 10px;
    }

    .product-breadcrumb {
        width: 100%;
        margin-bottom: 10px;
        font-size: 12px;
    }

    .product-breadcrumb ol {
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 1px 2px 5px;
        scroll-padding-inline: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .product-breadcrumb ol::-webkit-scrollbar {
        display: none;
    }

    .product-breadcrumb li {
        flex: 0 0 auto;
        gap: 5px;
    }

    .product-breadcrumb li + li::before {
        font-size: 15px;
    }

    .product-breadcrumb a,
    .product-breadcrumb [aria-current="page"] {
        min-height: 28px;
        gap: 5px;
        padding: 5px 8px;
        border-radius: 999px;
        font-size: 12px;
    }

    .product-breadcrumb [aria-current="page"] {
        max-width: 190px;
    }

    .product-breadcrumb i {
        font-size: 11px;
    }

    .product-section {
        margin-bottom: 28px;
    }

    .product-grid-simple,
    .related-products-grid,
    .product-other-grid,
    .content-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px;
    }

    .product-card-simple {
        max-width: none;
        border-radius: 11px;
        border-color: #edf1f7;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
    }

    .product-card-simple .product-image,
    .product-image {
        aspect-ratio: 1.62 / 1;
    }

    .product-card-body {
        gap: 3px !important;
        padding: 9px 10px 10px !important;
    }

    .product-name {
        min-height: calc(1.35em * 2) !important;
        font-size: 15px;
        line-height: 1.35 !important;
        -webkit-line-clamp: 2;
    }

    .product-price-wrap {
        margin-top: 1px !important;
        gap: 2px !important;
        min-height: 40px;
    }

    .product-discount-line {
        gap: 5px;
    }

    .product-discount-line span {
        font-size: 13px;
    }

    .product-discount-line b {
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1;
    }

    .product-price-row {
        gap: 6px;
    }

    .product-price {
        font-size: 17px !important;
        line-height: 1.15;
    }

    .product-stock-note {
        margin-top: 6px;
        font-size: 12px;
    }

    .product-card-rating {
        gap: 3px;
        font-size: 11px;
    }

    .product-card-rating i {
        font-size: 14px;
    }

    .product-list-pagination {
        gap: 7px;
        margin-top: 20px;
    }

    .product-page-link,
    .product-page-number,
    .product-page-ellipsis {
        min-height: 34px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .detail-breadcrumb-section {
        padding-top: 10px;
    }

    

    .detail-product-layout {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .detail-gallery-panel,
    .detail-gallery-main-wrap,
    .detail-lightbox-trigger,
    .detail-product-image {
        border-radius: 8px;
    }

    .detail-gallery-main-wrap {
        border-color: #edf1f7;
    }

    .detail-lightbox-trigger {
        min-height: 0;
        aspect-ratio: 1.62 / 1;
        background: #f8fafc;
    }

    .detail-product-image {
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: contain;
    }

    .detail-zoom-icon {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .detail-gallery-thumbs {
        gap: 7px;
        margin-top: 8px;
    }

    .detail-gallery-thumb {
        width: 60px;
        height: 43px;
        border-radius: 8px;
    }

    

    .detail-product-title {
        margin-bottom: 14px;
        font-size: 23px;
        line-height: 1.26;
        font-weight: 500;
    }

    .detail-variant-grid {
        gap: 10px;
        margin-bottom: 16px;
    }

    .detail-variant-button span {
        min-height: 44px;
        padding: 0 10px;
        font-size: 14px;
        line-height: 1.22;
    }

    .detail-price-row {
        align-items: center;
        gap: 8px 10px;
        margin-bottom: 12px;
    }

    .detail-price-row strong {
        font-size: 26px;
        line-height: 1.1;
    }

    .detail-old-price {
        font-size: 15px;
    }

    .detail-discount-badge {
        min-height: 24px;
        padding: 0 7px;
        font-size: 12px;
    }

    .detail-stock-text {
        font-size: 13px;
    }

    .detail-discount-timer {
        gap: 6px;
        margin: -2px 0 13px;
        padding: 7px 10px;
        font-size: 12px;
    }

    .detail-check-list {
        gap: 8px;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.42;
    }

    .detail-check-list i {
        font-size: 14px;
    }

    .detail-order-button {
        min-height: 48px;
        border-radius: 6px;
        font-size: 15px;
        letter-spacing: .06em;
    }

    .detail-description-section-simple {
        margin-top: 26px;
    }

    .detail-description-heading-simple {
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 13px;
    }

    .detail-description-heading-simple h2 {
        font-size: 21px;
    }

    .detail-share-trigger {
        min-height: 34px;
        gap: 7px;
        padding: 0 12px;
        font-size: 12px;
    }

    .detail-description-content-simple,
    .content-body {
        font-size: 15px;
        line-height: 1.75;
    }

    .detail-back-section-simple {
        margin-top: 20px;
        margin-bottom: 8px;
    }

    .product-review-section,
    .product-other-section,
    .related-products-section {
        margin-top: 24px;
        margin-bottom: 22px;
    }

    .product-review-header,
    .product-other-heading,
    .related-products-heading {
        gap: 10px;
        margin-bottom: 12px;
    }

    .product-review-header h2,
    .product-other-heading h2,
    .related-products-heading h2,
    .section-heading-row h2 {
        font-size: 20px;
        line-height: 1.25;
    }

    .product-review-header p,
    .product-other-heading p,
    .related-products-heading p,
    .product-other-panel-heading p {
        font-size: 13px;
        line-height: 1.55;
    }

    .review-summary-card,
    .review-card,
    .review-form-panel,
    .review-compact-empty {
        border-radius: 14px;
        padding: 14px;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
    }

    .review-summary-card strong,
    .review-compact-rating strong {
        font-size: 26px;
    }

    .review-page-btn,
    .review-page-status,
    .product-other-tab,
    .product-other-view-all,
    .related-products-view-all {
        min-height: 34px;
        padding: 7px 11px;
        font-size: 12px;
    }

    .content-page-wrap {
        padding-top: 0;
        padding-bottom: 26px;
    }

    .content-page-header {
        margin-bottom: 14px;
    }

    .content-page-header h1 {
        margin-bottom: 8px;
        font-size: 24px;
        line-height: 1.2;
    }

    .content-page-header p {
        font-size: 14px;
        line-height: 1.65;
    }

    .content-featured-image {
        margin: 14px 0 18px;
    }

    .content-featured-image img {
        max-height: 300px;
        border-radius: 12px;
    }

    .content-body h2 {
        margin-top: 22px;
        font-size: 21px;
    }

    .content-body h3 {
        margin-top: 20px;
        font-size: 18px;
    }

    .content-body p,
    .content-body ul,
    .content-body ol,
    .content-body blockquote,
    .content-body table {
        margin-bottom: 13px;
    }

    .content-body blockquote,
    .content-cta-box {
        border-radius: 13px;
        padding: 13px 14px;
    }

    .article-list-section {
        margin-bottom: 24px;
    }

    .article-card-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .article-card {
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
    }

    .article-card-body {
        padding: 13px;
    }

    .article-card-category {
        margin-bottom: 7px;
        padding: 4px 8px;
        font-size: 11px;
    }

    .article-card h2 {
        margin-bottom: 7px;
        font-size: 17px;
        line-height: 1.3;
    }

    .article-card p {
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.55;
    }

    .article-card-meta,
    .article-detail-meta {
        gap: 8px;
        font-size: 12px;
    }

    .article-search-actions,
    .article-search-suggestions {
        gap: 7px;
        font-size: 12px;
    }

    .article-search-suggestions a {
        padding: 5px 8px;
    }

    .main-content > .section-title {
        width: min(100% - 24px, 1120px);
        margin: 18px auto 12px;
        font-size: 23px;
        line-height: 1.2;
    }

    .main-content > .table-wrap {
        width: min(100% - 24px, 1120px);
        margin: 0 auto 14px;
        border: 1px solid #e6ebf3;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .04);
    }

    .main-content > .table-wrap table {
        min-width: 680px;
        font-size: 13px;
    }

    .main-content th,
    .main-content td {
        padding: 10px;
    }

    .cart-popup-dialog {
        border-radius: 18px 18px 0 0;
    }

    .checkout-page-simple {
        width: 100%;
        margin-bottom: 34px;
    }

    .checkout-back-link {
        width: 38px;
        height: 38px;
        margin: 6px 0 10px 14px;
        font-size: 17px;
    }

    .checkout-form-simple {
        gap: 12px;
    }

    .checkout-panel {
        padding: 15px 16px;
    }

    .checkout-section-head {
        margin-bottom: 13px;
        padding-bottom: 9px;
    }

    .checkout-section-head h1,
    .checkout-section-head h2 {
        font-size: 18px;
    }

    .checkout-order-items {
        gap: 10px;
    }

    .checkout-order-item {
        grid-template-columns: 86px 1fr;
        gap: 11px;
        padding: 8px;
        border-radius: 12px;
    }

    .checkout-order-thumb {
        width: 86px;
        height: 70px;
        border-radius: 9px;
    }

    .checkout-order-info strong {
        font-size: 15px;
    }

    .checkout-order-info span {
        font-size: 13px;
    }

    .checkout-order-info b {
        font-size: 15px;
    }

    .checkout-form-grid {
        gap: 12px;
    }

    .checkout-form-grid label,
    .checkout-coupon-group label {
        margin-bottom: 6px;
        font-size: 13px;
    }

    .checkout-form-simple input[type="text"],
    .checkout-form-simple input[type="tel"],
    .checkout-form-simple input[type="email"] {
        min-height: 44px;
        padding: 9px 11px;
        border-radius: 9px;
        font-size: 14px;
    }

    .checkout-payment-logo-grid {
        gap: 6px;
    }

    .checkout-payment-logo-card {
        flex: 0 0 calc((100% - 18px) / 4);
        width: calc((100% - 18px) / 4);
        height: 40px;
        min-height: 40px;
        padding: 4px 5px;
    }

    .payment-logo-box img {
        max-width: 58px;
        max-height: 22px;
    }

    .checkout-coupon-panel-simple {
        padding: 12px 16px 2px;
    }

    .checkout-coupon-simple-row {
        grid-template-columns: minmax(0, 1fr) 118px !important;
        border-radius: 6px;
    }

    .checkout-coupon-simple-row input,
    .checkout-coupon-simple-row .coupon-apply-button {
        height: 46px;
        font-size: 13px;
    }

    .checkout-total-summary-simple {
        padding: 13px 16px;
        font-size: 14px;
    }

    .checkout-grand-total span,
    .checkout-grand-total strong {
        font-size: 18px;
    }

    .checkout-submit-button {
        min-height: 56px;
        font-size: 15px;
        letter-spacing: .07em;
    }

    .site-footer {
        margin-top: 28px;
        padding: 24px 0;
    }

    .footer-grid {
        gap: 18px;
    }
}

@media (max-width: 420px) {
    .container {
        width: min(100% - 22px, 1120px);
    }

    

    

    

    

    

    

    .page-top-simple h1,
    .main-content > .section-title {
        font-size: 21px;
    }

    .category-section {
        width: calc(100% - 22px);
        margin-bottom: 20px;
    }

    .category-chips {
        gap: 8px 7px;
    }

    .category-chip {
        padding: 8px 12px;
        font-size: 12px;
    }

    .home-search,
    .listing-search {
        height: 48px;
        min-height: 48px;
    }

    .home-search input[type="text"],
    .home-search input,
    .listing-search input[type="text"],
    .listing-search input {
        height: 46px;
        padding-left: 16px;
        font-size: 13px;
    }

    .home-search button,
    .listing-search button {
        width: 48px;
        height: 46px;
    }

    

    .product-grid-simple,
    .related-products-grid,
    .product-other-grid,
    .content-product-grid {
        gap: 12px;
    }

    .product-card-simple {
        border-radius: 10px;
    }

    .product-card-body {
        padding: 8px 9px 9px !important;
    }

    .product-name {
        font-size: 14px;
    }

    .product-discount-line span {
        font-size: 12px;
    }

    .product-discount-line b {
        padding: 3px 5px;
        font-size: 9px;
    }

    .product-price {
        font-size: 16px !important;
    }

    .product-card-rating {
        font-size: 10px;
    }

    .product-card-rating i {
        font-size: 13px;
    }

    .product-breadcrumb [aria-current="page"] {
        max-width: 165px;
    }

    .detail-product-title {
        font-size: 22px;
    }

    .detail-variant-button span {
        min-height: 42px;
        font-size: 13px;
    }

    .detail-price-row strong {
        font-size: 25px;
    }

    .detail-description-heading-simple h2,
    .product-review-header h2,
    .product-other-heading h2,
    .related-products-heading h2,
    .section-heading-row h2 {
        font-size: 19px;
    }

    .content-page-header h1 {
        font-size: 22px;
    }

    .article-card-body {
        padding: 12px;
    }

    .article-card h2 {
        font-size: 16px;
    }

    .checkout-order-item {
        grid-template-columns: 78px 1fr;
        gap: 10px;
    }

    .checkout-order-thumb {
        width: 78px;
        height: 64px;
    }

    .checkout-coupon-simple-row {
        grid-template-columns: minmax(0, 1fr) 108px !important;
    }

    .checkout-coupon-simple-row input,
    .checkout-coupon-simple-row .coupon-apply-button {
        font-size: 12px;
    }
}

/* Mobile Compact UI Fine Tune
   Menyamakan proporsi hero/search dan merapatkan jarak nama-harga pada card produk mobile.
   Revisi: search bar mobile dibuat sedikit lebih lebar agar proporsinya lebih nyaman. */
@media (max-width: 768px) {
    .home-cover {
        margin-bottom: 0 !important;
    }

    .home-banner-slider,
    .home-cover-image-banner {
        width: 100% !important;
        aspect-ratio: 1200 / 410 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .home-banner-track,
    .home-banner-slide,
    .home-banner-slide picture,
    .home-banner-image-link {
        height: 100% !important;
    }

    .home-banner-slide-image,
    .home-banner-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

    .home-search-wrap {
        width: min(100% - 88px, 620px) !important;
        margin-top: -28px !important;
        margin-bottom: 20px !important;
        padding-inline: 0 !important;
    }

    .home-search {
        height: 46px !important;
        min-height: 46px !important;
        border-color: #dde5ef !important;
        box-shadow: 0 6px 15px rgba(15, 23, 42, 0.12) !important;
    }

    .home-search input[type="text"],
    .home-search input {
        height: 44px !important;
        padding-left: 18px !important;
        padding-right: 8px !important;
        font-size: 14px !important;
    }

    .home-search button {
        width: 48px !important;
        height: 44px !important;
        border-left: 0 !important;
    }

    .home-search .search-fa-icon {
        font-size: 17px !important;
    }

    .home-category-section {
        margin-top: 2px !important;
        margin-bottom: 24px !important;
    }

    .product-grid-simple .product-card-simple .product-card-body,
    .related-products-grid .product-card-simple .product-card-body,
    .product-other-grid .product-card-simple .product-card-body,
    .content-product-grid .product-card-simple .product-card-body {
        gap: 2px !important;
        padding: 8px 10px 9px !important;
    }

    .product-grid-simple .product-card-simple .product-name,
    .related-products-grid .product-card-simple .product-name,
    .product-other-grid .product-card-simple .product-name,
    .content-product-grid .product-card-simple .product-name {
        min-height: 0 !important;
        margin: 0 0 2px !important;
        line-height: 1.28 !important;
    }

    .product-grid-simple .product-card-simple .product-price-wrap,
    .related-products-grid .product-card-simple .product-price-wrap,
    .product-other-grid .product-card-simple .product-price-wrap,
    .content-product-grid .product-card-simple .product-price-wrap {
        min-height: 0 !important;
        margin-top: 0 !important;
        gap: 1px !important;
    }

    .product-grid-simple .product-card-simple .product-discount-line,
    .related-products-grid .product-card-simple .product-discount-line,
    .product-other-grid .product-card-simple .product-discount-line,
    .content-product-grid .product-card-simple .product-discount-line {
        margin: 0 0 1px !important;
        gap: 5px !important;
        line-height: 1 !important;
    }

    .product-grid-simple .product-card-simple .product-price-row,
    .related-products-grid .product-card-simple .product-price-row,
    .product-other-grid .product-card-simple .product-price-row,
    .content-product-grid .product-card-simple .product-price-row {
        min-height: 0 !important;
        margin-top: 0 !important;
        align-items: flex-end !important;
    }
}

@media (max-width: 420px) {
    .home-banner-slider,
    .home-cover-image-banner {
        aspect-ratio: 1200 / 420 !important;
    }

    .home-search-wrap {
        width: calc(100% - 80px) !important;
        margin-top: -27px !important;
        margin-bottom: 21px !important;
    }

    .home-search {
        height: 44px !important;
        min-height: 44px !important;
    }

    .home-search input[type="text"],
    .home-search input {
        height: 42px !important;
        padding-left: 16px !important;
        font-size: 13px !important;
    }

    .home-search button {
        width: 44px !important;
        height: 42px !important;
    }

    .home-search .search-fa-icon {
        font-size: 16px !important;
    }

    .home-category-section {
        margin-top: 0 !important;
        margin-bottom: 23px !important;
    }

    .product-grid-simple .product-card-simple .product-card-body,
    .related-products-grid .product-card-simple .product-card-body,
    .product-other-grid .product-card-simple .product-card-body,
    .content-product-grid .product-card-simple .product-card-body {
        padding: 7px 9px 8px !important;
    }

    .product-grid-simple .product-card-simple .product-name,
    .related-products-grid .product-card-simple .product-name,
    .product-other-grid .product-card-simple .product-name,
    .content-product-grid .product-card-simple .product-name {
        line-height: 1.27 !important;
    }
}

/* Mobile Compact UI Breadcrumb Artikel
   Merapikan breadcrumb mobile dan menghapus tampilan badge kategori redundan pada detail artikel. */
.article-detail-header > .article-card-category {
    display: none !important;
}

@media (max-width: 768px) {
    .category-breadcrumb-section {
        padding-top: 8px !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .category-breadcrumb-section .product-breadcrumb {
        position: relative !important;
        margin: 0 0 8px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    .category-breadcrumb-section .product-breadcrumb::after {
        content: '';
        position: absolute;
        top: 0;
        right: -1px;
        width: 28px;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0), #fff 72%);
    }

    .category-breadcrumb-section .product-breadcrumb ol {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 5px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        margin: 0 !important;
        padding: 1px 32px 4px 1px !important;
        scroll-padding-inline: 12px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .category-breadcrumb-section .product-breadcrumb ol::-webkit-scrollbar {
        display: none !important;
    }

    .category-breadcrumb-section .product-breadcrumb li {
        flex: 0 0 auto !important;
        gap: 5px !important;
        max-width: none !important;
    }

    .category-breadcrumb-section .product-breadcrumb li + li::before {
        color: #cbd5e1 !important;
        font-size: 15px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    .category-breadcrumb-section .product-breadcrumb a,
    .category-breadcrumb-section .product-breadcrumb [aria-current="page"] {
        min-height: 27px !important;
        gap: 5px !important;
        padding: 5px 8px !important;
        border-color: #e8f1dc !important;
        box-shadow: 0 4px 10px rgba(15, 23, 42, .035) !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .category-breadcrumb-section .product-breadcrumb [aria-current="page"] {
        max-width: 132px !important;
        padding-right: 9px !important;
        border-color: #e6ebf2 !important;
        background: #fff !important;
        color: #334155 !important;
    }

    .category-breadcrumb-section .product-breadcrumb i {
        font-size: 10px !important;
    }

    .article-detail-wrap {
        padding-top: 0 !important;
    }

    .article-detail-header {
        margin-top: 0 !important;
    }

    .article-detail-header h1 {
        margin-top: 2px !important;
    }
}

@media (max-width: 420px) {
    .category-breadcrumb-section .product-breadcrumb [aria-current="page"] {
        max-width: 118px !important;
    }
}

/* Mobile Compact UI Breadcrumb Full Text
   Breadcrumb mobile tetap horizontal scroll, tetapi teks item terakhir tidak dipotong. */
@media (max-width: 768px) {
    .category-breadcrumb-section .product-breadcrumb::after {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    .category-breadcrumb-section .product-breadcrumb ol {
        padding-right: 12px !important;
    }

    .category-breadcrumb-section .product-breadcrumb [aria-current="page"] {
        max-width: none !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    .category-breadcrumb-section .product-breadcrumb [aria-current="page"] span {
        min-width: auto !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 420px) {
    .category-breadcrumb-section .product-breadcrumb [aria-current="page"] {
        max-width: none !important;
    }
}


/* Desktop Compact Boxed Layout Frontend Tokodigital
   Membuat container desktop lebih padat, tidak terlalu melebar, dan tetap konsisten dengan mobile compact.
   Perubahan hanya visual; tidak mengubah struktur SEO, URL, form, atau logic fitur. */
@media (min-width: 1025px) {
    :root {
        --frontend-shell-width: 1080px;
        --frontend-content-width: 980px;
        --frontend-shell-border: #e5eaf1;
        --frontend-page-bg: #eef2f7;
    }

    body.frontend-body {
        background-color: var(--frontend-page-bg);
        background-image:
            linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
            linear-gradient(180deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
            radial-gradient(circle at 20% 0%, rgba(134, 210, 63, 0.10), transparent 28%),
            radial-gradient(circle at 82% 8%, rgba(37, 99, 235, 0.08), transparent 30%);
        background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
        background-attachment: fixed;
    }

    body.frontend-body .site-header,
    body.frontend-body .main-content,
    body.frontend-body .site-footer,
    body.frontend-body .site-copyright {
        width: min(100%, var(--frontend-shell-width));
        margin-left: auto;
        margin-right: auto;
        background: #ffffff;
        border-left: 1px solid var(--frontend-shell-border);
        border-right: 1px solid var(--frontend-shell-border);
    }

    body.frontend-body .site-header {
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
    }

    body.frontend-body .main-content {
        min-height: 64vh;
        overflow: hidden;
        box-shadow: 0 22px 46px rgba(15, 23, 42, 0.075);
    }

    body.frontend-body .site-footer {
        margin-top: 0;
        border-top: 1px solid #eef2f7;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
    }

    body.frontend-body .site-copyright {
        color: #f8fafc;
        background: linear-gradient(135deg, #1f2937 0%, #334155 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 26px 52px rgba(15, 23, 42, 0.08);
    }

    body.frontend-body .site-copyright a {
        color: #ffffff;
    }

    body.frontend-body .container {
        width: min(100% - 40px, var(--frontend-content-width));
    }

    body.frontend-body .header-inner {
        min-height: 68px;
    }

    body.frontend-body .logo-image {
        height: 40px;
        max-width: 210px;
    }

    body.frontend-body .header-nav {
        gap: 10px;
    }

    body.frontend-body .header-nav a {
        padding: 9px 14px;
    }

    body.frontend-body .home-cover {
        background: #ffffff;
        padding-top: 0;
    }

    body.frontend-body .home-banner-slider,
    body.frontend-body .home-cover-image-banner {
        width: min(100% - 40px, var(--frontend-content-width));
        aspect-ratio: 1080 / 310;
        border-radius: 0;
        box-shadow: none;
    }

    body.frontend-body .home-search-wrap {
        width: min(100% - 40px, 660px);
        margin-top: -35px;
        margin-bottom: 28px;
    }

    body.frontend-body .home-search {
        max-width: 660px;
        min-height: 56px;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.13);
    }

    body.frontend-body .home-search input[type="text"],
    body.frontend-body .home-search input {
        height: 56px;
        padding-left: 22px;
        font-size: 16px;
    }

    body.frontend-body .home-search button {
        width: 62px;
        height: 56px;
    }

    body.frontend-body .category-section {
        margin-bottom: 30px;
    }

    body.frontend-body .category-chips {
        gap: 10px 12px;
    }

    body.frontend-body .category-chip {
        min-width: 84px;
        padding: 10px 17px;
    }

    body.frontend-body .product-section,
    body.frontend-body .article-list-section,
    body.frontend-body .content-page-wrap,
    body.frontend-body .product-detail-wrap,
    body.frontend-body .cart-page-wrap,
    body.frontend-body .checkout-page {
        position: relative;
    }

    body.frontend-body .home-product-section .section-heading,
    body.frontend-body .section-heading {
        padding: 14px 18px;
        border: 1px solid #dcfce7;
        border-radius: 16px;
        background: linear-gradient(90deg, rgba(240, 253, 244, 0.88), rgba(255, 255, 255, 0.95));
    }

    body.frontend-body .product-grid-simple,
    body.frontend-body .related-products-grid,
    body.frontend-body .product-other-grid,
    body.frontend-body .content-product-grid {
        gap: 18px;
    }

    body.frontend-body .product-card-simple {
        border-color: #e8edf5;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
    }

    body.frontend-body .product-card-simple:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(15, 23, 42, 0.09);
    }

    body.frontend-body .product-card-simple,
    body.frontend-body .product-card-simple:hover {
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }

    body.frontend-body .page-top-simple,
    body.frontend-body .content-page-header,
    body.frontend-body .article-detail-header {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    body.frontend-body .article-detail-content,
    body.frontend-body .static-page-content,
    body.frontend-body .content-page-body {
        max-width: 880px;
        margin-left: auto;
        margin-right: auto;
    }

    body.frontend-body .product-breadcrumb ol {
        flex-wrap: wrap;
        overflow: visible;
    }

    body.frontend-body .store-status-banner-wrap {
        padding-top: 16px;
    }

    /* Desktop medium: detail produk dibuat lebih padat agar tombol dan kolom tidak terlalu melebar. */
    body.frontend-body .detail-product-layout {
        grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
        gap: 24px;
        max-width: var(--frontend-content-width);
        margin-left: auto;
        margin-right: auto;
    }

    body.frontend-body .detail-buy-panel {
        max-width: 520px;
    }

    body.frontend-body .detail-product-image {
        max-height: 360px;
    }

    body.frontend-body .detail-product-title {
        margin-bottom: 18px;
        font-size: 24px;
    }

    body.frontend-body .detail-variant-grid {
        margin-bottom: 20px;
    }

    body.frontend-body .detail-variant-button span {
        min-height: 46px;
    }

    body.frontend-body .detail-price-row {
        margin-bottom: 13px;
    }

    body.frontend-body .detail-order-button {
        min-height: 48px;
    }

    body.frontend-body .detail-description-section-simple,
    body.frontend-body .product-review-section,
    body.frontend-body .product-other-section {
        max-width: var(--frontend-content-width);
    }
}

@media (min-width: 1440px) {
    body.frontend-body .product-grid-simple.home-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    body.frontend-body {
        background: #ffffff;
    }
}


/* Mobile Product Image Fit
   Menjaga gambar produk di card mobile tetap utuh mengikuti rasio upload 900x600. */
@media (max-width: 768px) {
    body.frontend-body .product-card-simple .product-image-link {
        background: #f8fafc;
        overflow: hidden;
    }

    body.frontend-body .product-grid-simple .product-card-simple .product-image,
    body.frontend-body .home-product-grid .product-card-simple .product-image,
    body.frontend-body .related-products-grid .product-card-simple .product-image,
    body.frontend-body .product-other-grid .product-card-simple .product-image,
    body.frontend-body .content-product-grid .product-card-simple .product-image {
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
        background: #f8fafc;
    }
}


/* Desktop Inner Tight Boxed Layout
   Merapatkan isi desktop ke pembatas panel agar banner, section, dan grid tidak terlihat renggang.
   Perubahan hanya visual desktop; mobile, fitur, SEO, dan logic tetap tidak diubah. */
@media (min-width: 1025px) {
    :root {
        --frontend-content-width: 1040px;
    }

    body.frontend-body .container {
        width: min(100% - 24px, var(--frontend-content-width));
    }

    body.frontend-body .home-banner-slider,
    body.frontend-body .home-cover-image-banner {
        width: min(100% - 24px, var(--frontend-content-width));
    }

    body.frontend-body .home-product-section .section-heading,
    body.frontend-body .section-heading {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.frontend-body .detail-product-layout,
    body.frontend-body .detail-description-section-simple,
    body.frontend-body .product-review-section,
    body.frontend-body .product-other-section {
        max-width: min(100% - 24px, var(--frontend-content-width));
    }
}


/* Desktop Compact UI Global Frontend
   Menyeragamkan tampilan desktop agar lebih padat, fokus, dan konsisten dengan Mobile Compact UI.
   Perubahan hanya visual frontend; tidak mengubah URL, database, form, validasi, SEO, atau logic fitur. */
@media (min-width: 1025px) {
    :root {
        --frontend-shell-width: 1060px;
        --frontend-content-width: 1032px;
        --frontend-inner-gutter: 14px;
        --frontend-shell-border: #dfe6ef;
        --frontend-page-bg: #eef3f8;
    }

    body.frontend-body {
        background-color: var(--frontend-page-bg);
        background-image:
            linear-gradient(90deg, rgba(100, 116, 139, 0.055) 1px, transparent 1px),
            linear-gradient(180deg, rgba(100, 116, 139, 0.055) 1px, transparent 1px),
            radial-gradient(circle at 16% 0%, rgba(134, 210, 63, 0.08), transparent 26%),
            radial-gradient(circle at 86% 6%, rgba(37, 99, 235, 0.055), transparent 28%);
        background-size: 24px 24px, 24px 24px, 100% 100%, 100% 100%;
        background-attachment: fixed;
    }

    body.frontend-body .site-header,
    body.frontend-body .main-content,
    body.frontend-body .site-footer,
    body.frontend-body .site-copyright {
        width: min(100%, var(--frontend-shell-width));
        margin-left: auto;
        margin-right: auto;
        border-left: 1px solid var(--frontend-shell-border);
        border-right: 1px solid var(--frontend-shell-border);
    }

    body.frontend-body .site-header {
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(10px);
        box-shadow: 0 1px 0 rgba(15, 23, 42, 0.045);
    }

    body.frontend-body .main-content {
        min-height: 62vh;
        background: #ffffff;
        overflow: hidden;
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.065);
    }

    body.frontend-body .container {
        width: min(100% - var(--frontend-inner-gutter) * 2, var(--frontend-content-width));
    }

    body.frontend-body .header-inner {
        min-height: 58px;
        gap: 12px;
    }

    body.frontend-body .logo-image {
        height: 36px;
        max-width: 188px;
    }

    body.frontend-body .header-nav {
        gap: 4px;
    }

    body.frontend-body .header-nav a {
        padding: 7px 12px;
        border-radius: 999px;
        font-size: 15px;
        line-height: 1.2;
    }

    body.frontend-body .header-cart-icon {
        min-width: 38px;
        height: 38px;
        justify-content: center;
        padding: 0;
        font-size: 21px;
    }

    body.frontend-body .header-cart-icon em,
    body.frontend-body .icon-button em {
        top: -1px;
        right: -2px;
    }

    body.frontend-body .home-cover {
        padding-top: 0;
        padding-bottom: 0;
        background: #ffffff;
    }

    body.frontend-body .home-banner-slider,
    body.frontend-body .home-cover-image-banner {
        width: min(100% - var(--frontend-inner-gutter) * 2, var(--frontend-content-width));
        aspect-ratio: 1032 / 300;
        max-height: 300px;
        border-radius: 0;
        box-shadow: none;
    }

    body.frontend-body .home-banner-slide-image,
    body.frontend-body .home-banner-image {
        object-fit: cover;
        object-position: center center;
    }

    body.frontend-body .home-search-wrap {
        width: min(100% - 240px, 640px);
        margin-top: -32px;
        margin-bottom: 22px;
    }

    body.frontend-body .home-search {
        max-width: 640px;
        min-height: 50px;
        border-color: #dce3ec;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
    }

    body.frontend-body .home-search input[type="text"],
    body.frontend-body .home-search input {
        height: 50px;
        padding-left: 20px;
        font-size: 15px;
    }

    body.frontend-body .home-search button {
        width: 58px;
        height: 50px;
        font-size: 26px;
    }

    body.frontend-body .category-section {
        margin-bottom: 24px;
    }

    body.frontend-body .category-chips {
        gap: 8px 10px;
    }

    body.frontend-body .category-chip {
        min-width: 76px;
        min-height: 38px;
        padding: 9px 15px;
        border-radius: 8px;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    body.frontend-body .store-info-simple {
        margin-bottom: 24px;
        padding: 14px 16px;
        border-radius: 14px;
    }

    body.frontend-body .product-section,
    body.frontend-body .article-list-section,
    body.frontend-body .content-page-wrap,
    body.frontend-body .cart-page-wrap {
        margin-bottom: 28px;
    }

    body.frontend-body .home-product-section .section-heading,
    body.frontend-body .section-heading {
        min-height: 58px;
        margin-bottom: 14px;
        padding: 11px 14px;
        border-radius: 14px;
        box-shadow: 0 8px 22px rgba(22, 101, 52, 0.06);
    }

    body.frontend-body .section-title-modern {
        gap: 9px;
        font-size: 21px;
    }

    body.frontend-body .section-title-icon {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        border-radius: 12px;
        font-size: 14px;
    }

    body.frontend-body .section-link-modern {
        min-height: 34px;
        padding: 7px 12px;
        font-size: 13px;
    }

    body.frontend-body .product-grid-simple,
    body.frontend-body .related-products-grid,
    body.frontend-body .product-other-grid,
    body.frontend-body .content-product-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    body.frontend-body .product-card-simple {
        border-radius: 13px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
    }

    body.frontend-body .product-card-simple:hover {
        transform: translateY(-2px);
        box-shadow: 0 13px 26px rgba(15, 23, 42, 0.085);
    }

    body.frontend-body .product-card-simple .product-image-link {
        background: #f8fafc;
    }

    body.frontend-body .product-card-simple .product-image {
        aspect-ratio: 3 / 2;
        height: auto;
        object-fit: contain;
        object-position: center center;
        background: #f8fafc;
    }

    body.frontend-body .product-card-simple .product-card-body {
        padding: 10px 12px 12px !important;
        gap: 4px !important;
    }

    body.frontend-body .product-card-simple .product-name {
        font-size: 16px;
        line-height: 1.3 !important;
    }

    body.frontend-body .product-card-simple .product-discount-line span {
        font-size: 12px;
    }

    body.frontend-body .product-card-simple .product-discount-line b {
        min-height: 19px;
        padding: 0 6px;
        font-size: 12px;
    }

    body.frontend-body .product-card-simple .product-price {
        font-size: 19px;
        line-height: 1.12;
    }

    body.frontend-body .product-card-rating {
        gap: 3px;
        font-size: 12px;
    }

    body.frontend-body .product-card-rating i {
        font-size: 15px;
    }

    body.frontend-body .page-top-simple,
    body.frontend-body .content-page-header,
    body.frontend-body .article-detail-header {
        max-width: 820px;
        margin-left: auto;
        margin-right: auto;
    }

    body.frontend-body .page-top-simple {
        padding-top: 20px;
        padding-bottom: 10px;
    }

    body.frontend-body .page-top-simple h1,
    body.frontend-body .content-page-header h1,
    body.frontend-body .article-detail-header h1 {
        font-size: clamp(25px, 2.5vw, 34px);
        line-height: 1.18;
    }

    body.frontend-body .page-top-simple p,
    body.frontend-body .content-page-header p,
    body.frontend-body .article-detail-header p {
        font-size: 15px;
        line-height: 1.62;
    }

    body.frontend-body .product-breadcrumb {
        margin-top: 18px;
        margin-bottom: 12px;
    }

    body.frontend-body .product-breadcrumb ol {
        flex-wrap: wrap;
        gap: 8px;
        overflow: visible;
    }

    body.frontend-body .product-breadcrumb a,
    body.frontend-body .product-breadcrumb [aria-current="page"] {
        min-height: 32px;
        padding: 7px 11px;
        border-radius: 999px;
        font-size: 13px;
    }

    body.frontend-body .detail-product-page {
        padding-top: 10px;
    }

    body.frontend-body .detail-product-layout {
        grid-template-columns: minmax(0, 398px) minmax(0, 1fr);
        gap: 22px;
        max-width: var(--frontend-content-width);
        margin-left: auto;
        margin-right: auto;
    }

    body.frontend-body .detail-gallery-panel,
    body.frontend-body .detail-buy-panel {
        align-self: start;
    }

    body.frontend-body .detail-product-image {
        max-height: 338px;
        border-radius: 8px;
    }

    body.frontend-body .detail-product-title {
        margin-bottom: 16px;
        font-size: 23px;
        line-height: 1.24;
    }

    body.frontend-body .detail-variant-grid {
        gap: 8px;
        margin-bottom: 18px;
    }

    body.frontend-body .detail-variant-button span {
        min-height: 44px;
        padding: 0 12px;
        font-size: 15px;
    }

    body.frontend-body .detail-price-row {
        gap: 11px;
        margin-bottom: 12px;
    }

    body.frontend-body .detail-price-row strong {
        font-size: 26px;
    }

    body.frontend-body .detail-discount-timer {
        margin-bottom: 13px;
        padding: 6px 10px;
        font-size: 12px;
    }

    body.frontend-body .detail-check-list {
        gap: 7px;
        margin-bottom: 20px;
        font-size: 14px;
    }

    body.frontend-body .detail-order-button {
        min-height: 46px;
        font-size: 15px;
    }

    body.frontend-body .detail-description-section-simple,
    body.frontend-body .product-review-section,
    body.frontend-body .product-other-section {
        max-width: min(100% - var(--frontend-inner-gutter) * 2, var(--frontend-content-width));
        margin-top: 26px;
    }

    body.frontend-body .detail-description-heading-simple {
        margin-bottom: 13px;
        padding-bottom: 10px;
    }

    body.frontend-body .detail-description-heading-simple h2,
    body.frontend-body .product-review-header h2,
    body.frontend-body .product-other-heading h2 {
        font-size: 21px;
    }

    body.frontend-body .detail-description-content-simple,
    body.frontend-body .content-body {
        font-size: 15px;
        line-height: 1.75;
    }

    body.frontend-body .content-page-wrap,
    body.frontend-body .article-detail-wrap {
        max-width: 860px;
        padding-top: 8px;
        padding-bottom: 30px;
    }

    body.frontend-body .article-detail-content,
    body.frontend-body .static-page-content,
    body.frontend-body .content-page-body {
        max-width: 820px;
    }

    body.frontend-body .content-featured-image {
        margin: 16px 0 20px;
    }

    body.frontend-body .content-featured-image img {
        max-height: 360px;
        border-radius: 14px;
    }

    body.frontend-body .article-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
    }

    body.frontend-body .article-card {
        border-radius: 14px;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
    }

    body.frontend-body .article-card-body {
        padding: 13px;
    }

    body.frontend-body .article-card h2 {
        margin-bottom: 7px;
        font-size: 17px;
        line-height: 1.28;
    }

    body.frontend-body .article-card p {
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.55;
    }

    body.frontend-body .article-card-meta,
    body.frontend-body .article-detail-meta {
        gap: 8px;
        font-size: 12px;
    }

    body.frontend-body .checkout-page-simple {
        width: min(720px, calc(100% - 28px));
        margin-bottom: 42px;
    }

    body.frontend-body .checkout-form-simple {
        gap: 14px;
    }

    body.frontend-body .checkout-panel {
        padding: 16px;
        border-radius: 15px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.055);
    }

    body.frontend-body .checkout-section-head {
        margin-bottom: 13px;
        padding-bottom: 9px;
    }

    body.frontend-body .checkout-section-head h1,
    body.frontend-body .checkout-section-head h2 {
        font-size: 19px;
    }

    body.frontend-body .checkout-order-item {
        grid-template-columns: 84px 1fr;
        gap: 12px;
        padding: 9px;
    }

    body.frontend-body .checkout-order-thumb {
        width: 84px;
        height: 66px;
    }

    body.frontend-body .cart-page-wrap {
        max-width: 860px;
    }

    body.frontend-body .site-footer {
        margin-top: 0;
        padding: 26px 0;
        border-top: 1px solid #e6edf5;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        box-shadow: none;
    }

    body.frontend-body .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 20px;
    }

    body.frontend-body .footer-column h2 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    body.frontend-body .footer-brand .footer-logo {
        max-width: 170px;
        max-height: 50px;
        margin-bottom: 10px;
    }

    body.frontend-body .footer-brand p,
    body.frontend-body .footer-muted,
    body.frontend-body .footer-links a,
    body.frontend-body .footer-service-list li {
        font-size: 13px;
        line-height: 1.5;
    }

    body.frontend-body .site-copyright {
        padding: 12px 0;
        color: #f8fafc;
        background: linear-gradient(135deg, #182233 0%, #253248 100%);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        font-size: 13px;
    }
}

@media (min-width: 1025px) and (max-width: 1120px) {
    body.frontend-body .site-header,
    body.frontend-body .main-content,
    body.frontend-body .site-footer,
    body.frontend-body .site-copyright {
        width: 100%;
        border-left: 0;
        border-right: 0;
    }
}

/* Desktop Product Detail Compact Conversion Layout
   Memusatkan halaman detail produk agar tidak melebar kosong ke kanan.
   Perubahan hanya CSS desktop; mobile, fitur, SEO, checkout, cart, dan logic produk tetap tidak diubah. */
@media (min-width: 1025px) {
    body.frontend-body .detail-breadcrumb-section,
    body.frontend-body .detail-product-page,
    body.frontend-body .detail-description-section-simple,
    body.frontend-body .product-review-section,
    body.frontend-body .product-other-section {
        width: min(100% - var(--frontend-inner-gutter) * 2, 960px) !important;
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.frontend-body .detail-product-page {
        padding-top: 8px;
    }

    body.frontend-body .detail-product-layout {
        width: 100%;
        max-width: 940px !important;
        grid-template-columns: minmax(0, 380px) minmax(0, 500px) !important;
        justify-content: center;
        align-items: start;
        gap: 20px !important;
    }

    body.frontend-body .detail-gallery-panel {
        width: 100%;
        max-width: 380px;
    }

    body.frontend-body .detail-gallery-main-wrap,
    body.frontend-body .detail-lightbox-trigger {
        width: 100%;
    }

    body.frontend-body .detail-product-image {
        width: 100%;
        max-height: 320px !important;
        object-fit: contain;
        object-position: center center;
        background: #f8fafc;
    }

    body.frontend-body .detail-buy-panel {
        width: 100%;
        max-width: 500px !important;
    }

    body.frontend-body .detail-product-title {
        margin-bottom: 14px !important;
    }

    body.frontend-body .detail-variant-grid {
        gap: 8px !important;
        margin-bottom: 16px !important;
    }

    body.frontend-body .detail-variant-button span {
        min-height: 42px !important;
        padding: 0 12px !important;
    }

    body.frontend-body .detail-price-row {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    body.frontend-body .detail-discount-timer {
        width: max-content;
        max-width: 100%;
        margin-bottom: 12px !important;
    }

    body.frontend-body .detail-check-list {
        margin-bottom: 18px !important;
    }

    body.frontend-body .detail-order-button {
        width: 100%;
        max-width: 100%;
    }

    body.frontend-body .detail-description-section-simple {
        margin-top: 24px !important;
    }

    body.frontend-body .product-review-header {
        align-items: center;
    }

    body.frontend-body .review-summary-card {
        min-width: 190px;
        padding: 13px 15px;
    }

    body.frontend-body .product-other-grid,
    body.frontend-body .related-products-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1025px) and (max-width: 1120px) {
    body.frontend-body .detail-product-layout {
        grid-template-columns: minmax(0, 360px) minmax(0, 480px) !important;
        max-width: 880px !important;
    }

    body.frontend-body .detail-gallery-panel {
        max-width: 360px;
    }
}


/* Desktop Detail Produk Balance Layout
   Menyeimbangkan halaman detail produk desktop dengan gambar lebih besar seperti referensi tokohayday.com.
   Perubahan hanya visual CSS desktop; mobile, database, SEO, checkout, cart, dan logic produk tidak diubah. */
@media (min-width: 1025px) {
    body.frontend-body .detail-breadcrumb-section,
    body.frontend-body .detail-product-page,
    body.frontend-body .detail-description-section-simple,
    body.frontend-body .product-review-section,
    body.frontend-body .product-other-section {
        width: min(100% - var(--frontend-inner-gutter) * 2, 1060px) !important;
        max-width: 1060px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.frontend-body .detail-product-layout {
        max-width: 1040px !important;
        grid-template-columns: minmax(0, 520px) minmax(0, 480px) !important;
        gap: 24px !important;
        align-items: start;
        justify-content: center;
    }

    body.frontend-body .detail-gallery-panel {
        max-width: 520px !important;
    }

    body.frontend-body .detail-product-image {
        max-height: 390px !important;
        object-fit: contain;
        object-position: center center;
        background: #f8fafc;
    }

    body.frontend-body .detail-buy-panel {
        max-width: 480px !important;
    }

    body.frontend-body .detail-variant-button span {
        min-height: 42px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    body.frontend-body .detail-order-button {
        width: 100%;
        max-width: 480px;
    }

    body.frontend-body .product-review-header {
        gap: 20px;
    }
}

@media (min-width: 1025px) and (max-width: 1120px) {
    body.frontend-body .detail-breadcrumb-section,
    body.frontend-body .detail-product-page,
    body.frontend-body .detail-description-section-simple,
    body.frontend-body .product-review-section,
    body.frontend-body .product-other-section {
        width: min(100% - 32px, 980px) !important;
        max-width: 980px !important;
    }

    body.frontend-body .detail-product-layout {
        max-width: 960px !important;
        grid-template-columns: minmax(0, 490px) minmax(0, 430px) !important;
        gap: 20px !important;
    }

    body.frontend-body .detail-gallery-panel {
        max-width: 490px !important;
    }

    body.frontend-body .detail-buy-panel {
        max-width: 430px !important;
    }

    body.frontend-body .detail-product-image {
        max-height: 360px !important;
    }
}

/* Mobile Detail Product Image Rounded Frame
   Menghaluskan sudut frame gambar produk detail di mobile agar tidak terlihat runcing.
   Perubahan ini hanya visual CSS; struktur HTML, fitur, database, dan SEO tidak diubah. */
@media (max-width: 768px) {
    body.frontend-body .detail-gallery-panel {
        border-radius: 18px !important;
    }

    body.frontend-body .detail-gallery-main-wrap,
    body.frontend-body .detail-lightbox-trigger,
    body.frontend-body .detail-product-image,
    body.frontend-body .detail-product-image-empty {
        border-radius: 16px !important;
    }

    body.frontend-body .detail-gallery-main-wrap {
        overflow: hidden !important;
        border-color: #e8edf5 !important;
        background: #f8fafc !important;
    }

    body.frontend-body .detail-lightbox-trigger {
        overflow: hidden !important;
        background: #f8fafc !important;
    }

    body.frontend-body .detail-product-image {
        display: block;
        object-position: center center;
        clip-path: inset(0 round 16px);
        background: #f8fafc;
    }

    body.frontend-body .detail-zoom-icon {
        top: 12px !important;
        right: 12px !important;
        width: 30px !important;
        height: 30px !important;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(255, 255, 255, 0.94) !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.14) !important;
    }
}

/* Mobile Detail Product Image Soft Frame v2
   Clipping dipindahkan ke wrapper utama agar sudut gambar benar-benar rounded di Chrome Android. */
@media (max-width: 768px) {
    body.frontend-body .detail-product-page .detail-gallery-panel {
        border-radius: 22px !important;
        background: transparent !important;
    }

    body.frontend-body .detail-product-page .detail-gallery-main-wrap,
    body.frontend-body .detail-product-page .detail-lightbox-trigger {
        border-radius: 20px !important;
        overflow: hidden !important;
        border-color: #e7edf5 !important;
        background: #f8fafc !important;
        clip-path: inset(0 round 20px) !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    body.frontend-body .detail-product-page .detail-product-image,
    body.frontend-body .detail-product-page .detail-product-image-empty {
        border-radius: 0 !important;
        clip-path: none !important;
        background: #f8fafc !important;
    }

    body.frontend-body .detail-product-page .detail-zoom-icon {
        top: 13px !important;
        right: 13px !important;
        width: 30px !important;
        height: 30px !important;
        border: 1px solid rgba(148, 163, 184, 0.22) !important;
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 5px 14px rgba(15, 23, 42, 0.15) !important;
    }
}


/* Mobile Detail Product Image Natural Frame v3
   Perbaikan lanjutan: frame gambar detail mobile dibuat sedikit lebih sempit, radius diterapkan ke wrapper + tombol + img,
   dan clipping dibuat lebih tegas agar sisi gambar tidak terlihat runcing di Chrome Android. */
@media (max-width: 768px) {
    body.frontend-body .detail-product-page .detail-gallery-panel {
        width: calc(100% - 28px) !important;
        max-width: 640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 18px !important;
        overflow: visible !important;
        background: transparent !important;
    }

    body.frontend-body .detail-product-page .detail-gallery-main-wrap {
        width: 100% !important;
        border: 1px solid #e8edf5 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #f8fafc !important;
        -webkit-border-radius: 18px !important;
        clip-path: inset(0 round 18px) !important;
        -webkit-mask: -webkit-radial-gradient(white, black);
        mask: radial-gradient(white, black);
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    body.frontend-body .detail-product-page .detail-lightbox-trigger {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 1.62 / 1 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        background: #f8fafc !important;
        -webkit-border-radius: 18px !important;
        clip-path: inset(0 round 18px) !important;
        transform: translateZ(0);
    }

    body.frontend-body .detail-product-page .detail-product-image,
    body.frontend-body .detail-product-page .detail-product-image-empty {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        border-radius: 18px !important;
        -webkit-border-radius: 18px !important;
        object-fit: cover !important;
        object-position: center center !important;
        overflow: hidden !important;
        clip-path: inset(0 round 18px) !important;
        background: #f8fafc !important;
        transform: translateZ(0);
    }

    body.frontend-body .detail-product-page .detail-zoom-icon {
        top: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16) !important;
    }
}

@media (max-width: 380px) {
    body.frontend-body .detail-product-page .detail-gallery-panel {
        width: calc(100% - 24px) !important;
    }
}

/* Mobile Detail Product Image Natural Frame v4
   Sedikit memperbesar frame gambar detail mobile setelah radius sudah sesuai, tanpa mengubah layout desktop. */
@media (max-width: 768px) {
    body.frontend-body .detail-product-page .detail-gallery-panel {
        width: calc(100% - 16px) !important;
        max-width: 660px !important;
    }

    body.frontend-body .detail-product-page .detail-lightbox-trigger {
        aspect-ratio: 1.62 / 1 !important;
    }

    body.frontend-body .detail-product-page .detail-zoom-icon {
        top: 12px !important;
        right: 12px !important;
    }
}

@media (max-width: 380px) {
    body.frontend-body .detail-product-page .detail-gallery-panel {
        width: calc(100% - 14px) !important;
    }
}


/* Product Price Typography Softening
   Mengurangi dominasi visual harga/diskon di frontend tanpa mengubah logic harga, diskon, cart, checkout, atau SEO. */
body.frontend-body .product-price,
body.frontend-body .product-card-simple .product-price {
    font-size: 18px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 1.18 !important;
}

body.frontend-body .product-discount-line span,
body.frontend-body .detail-old-price,
body.frontend-body .cart-popup-modern .cart-popup-discount-line span,
body.frontend-body .cart-popup-discount-line span {
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #8b929d !important;
}

body.frontend-body .product-discount-line b,
body.frontend-body .detail-discount-badge,
body.frontend-body .cart-popup-modern .cart-popup-discount-line em,
body.frontend-body .cart-popup-discount-line em {
    min-height: 20px !important;
    padding: 0 6px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

body.frontend-body .detail-price-row strong {
    font-size: 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

body.frontend-body .detail-stock-text {
    font-size: 14px !important;
    font-weight: 400 !important;
}

body.frontend-body .detail-discount-timer,
body.frontend-body .detail-discount-timer strong {
    font-weight: 500 !important;
}

body.frontend-body .detail-discount-timer {
    font-size: 12.5px !important;
    padding: 6px 10px !important;
}

body.frontend-body .checkout-order-info b,
body.frontend-body .checkout-total-summary-simple strong,
body.frontend-body .checkout-grand-total strong,
body.frontend-body .checkout-grand-total span,
body.frontend-body .summary-total strong,
body.frontend-body .cart-popup-modern .cart-popup-price-wrap b,
body.frontend-body .cart-popup-price-wrap b,
body.frontend-body .cart-popup-modern .cart-popup-subtotal,
body.frontend-body .cart-popup-subtotal {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

body.frontend-body .checkout-order-info b,
body.frontend-body .cart-popup-modern .cart-popup-price-wrap b,
body.frontend-body .cart-popup-price-wrap b {
    font-size: 14px !important;
}

/* Desktop category/menu chips under Home banner: tidak terlalu tebal agar lebih nyaman dibaca. */
@media (min-width: 769px) {
    body.frontend-body .category-chip,
    body.frontend-body .home-category-section .category-chip,
    body.frontend-body .category-chips .category-chip {
        font-weight: 400 !important;
        letter-spacing: 0 !important;
    }

    body.frontend-body .category-chip.active,
    body.frontend-body .category-chip:hover {
        font-weight: 500 !important;
    }
}

@media (max-width: 768px) {
    body.frontend-body .product-price,
    body.frontend-body .product-card-simple .product-price {
        font-size: 17px !important;
        font-weight: 500 !important;
    }

    body.frontend-body .product-discount-line span {
        font-size: 12px !important;
    }

    body.frontend-body .product-discount-line b {
        min-height: 19px !important;
        padding: 0 6px !important;
        font-size: 11.5px !important;
        font-weight: 500 !important;
    }

    body.frontend-body .detail-price-row {
        gap: 9px !important;
        align-items: center !important;
    }

    body.frontend-body .detail-price-row strong {
        font-size: 24px !important;
        font-weight: 500 !important;
    }

    body.frontend-body .detail-old-price {
        font-size: 14px !important;
        font-weight: 400 !important;
    }

    body.frontend-body .detail-discount-badge {
        min-height: 23px !important;
        padding: 0 7px !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
    }

    body.frontend-body .detail-stock-text {
        font-size: 14px !important;
    }
}

@media (max-width: 420px) {
    body.frontend-body .product-price,
    body.frontend-body .product-card-simple .product-price {
        font-size: 16px !important;
    }

    body.frontend-body .detail-price-row strong {
        font-size: 23px !important;
    }

    body.frontend-body .detail-old-price {
        font-size: 13.5px !important;
    }

    body.frontend-body .detail-discount-badge {
        font-size: 12px !important;
    }
}

/* Admin - Galeri Media */
.media-gallery-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.media-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.media-summary-card {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.media-summary-card span {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
}

.media-summary-card strong {
    color: #0f172a;
    font-size: 28px;
    line-height: 1;
}

.media-summary-card small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.media-filter-card {
    margin-bottom: 16px;
}

.media-filter-form {
    display: grid;
    grid-template-columns: minmax(150px, .8fr) minmax(170px, 1fr) minmax(220px, 1.4fr) auto;
    align-items: end;
    gap: 12px;
}

.media-filter-form label {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}

.media-filter-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.media-bulk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid #fee2e2;
    border-radius: 16px;
    background: #fff7f7;
}

.media-bulk-bar div {
    display: grid;
    gap: 3px;
}

.media-bulk-bar strong {
    color: #7f1d1d;
}

.media-bulk-bar span {
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}


.media-bulk-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.media-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #ffffff;
    color: #7f1d1d;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.media-select-all input {
    width: 16px;
    height: 16px;
    accent-color: #dc2626;
}

.media-select-all.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.media-bulk-actions small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.media-bulk-limit-note {
    width: 100%;
    text-align: right;
}

.media-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.media-card {
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.media-thumb-wrap {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    background: #f8fafc;
    border-bottom: 1px solid #edf2f7;
}

.media-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.media-select-box {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .12);
}

.media-select-box input {
    width: 18px;
    height: 18px;
    accent-color: #dc2626;
}

.media-thumb-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    width: 100%;
    min-height: 100%;
    color: #94a3b8;
    text-align: center;
    font-weight: 800;
}

.media-thumb-empty i {
    font-size: 32px;
}

.media-thumb-empty--large {
    min-height: 300px;
    border: 1px dashed #cbd5e1;
    border-radius: 18px;
    background: #f8fafc;
}

.media-card-body {
    display: grid;
    gap: 10px;
    padding: 14px;
}

.media-card-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.media-card-title-row strong {
    min-width: 0;
    color: #0f172a;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.media-card code {
    display: block;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.media-meta-list,
.media-location-list {
    display: grid;
    gap: 6px;
}

.media-meta-list span,
.media-location-list span {
    color: #64748b;
    font-size: 12px;
    line-height: 1.35;
}

.media-meta-list i {
    width: 16px;
    color: #94a3b8;
}

.media-protected-note,
.media-pending-note {
    margin: 0;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.4;
}

.media-protected-note {
    color: #166534;
    background: #ecfdf5;
}

.media-pending-note {
    color: #92400e;
    background: #fffbeb;
}

.media-card-actions,
.media-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-badge-warning {
    color: #92400e;
    background: #fef3c7;
}

.admin-badge-muted {
    color: #475569;
    background: #e2e8f0;
}

.media-detail-grid {
    display: grid;
    grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
    gap: 18px;
    margin-bottom: 18px;
}

.media-detail-preview {
    display: grid;
    place-items: center;
}

.media-detail-preview img {
    max-width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: 16px;
}

.media-detail-list strong {
    overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
    .media-summary-grid,
    .media-gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .media-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .media-gallery-header,
    .media-bulk-bar {
        display: grid;
    }

    .media-bulk-actions {
        justify-content: stretch;
    }

    .media-bulk-actions .btn {
        width: 100%;
    }

    .media-bulk-limit-note {
        text-align: left;
    }

    .media-summary-grid,
    .media-gallery-grid,
    .media-filter-form,
    .media-detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .media-summary-card strong {
        font-size: 24px;
    }

    .media-card-body {
        padding: 12px;
    }
}

/* Galeri Media - UX cleanup tools */
.media-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.media-header-actions form {
    margin: 0;
}

.media-quick-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 14px 0 16px;
}

.media-quick-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    color: var(--text-color, #1f2937);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: .18s ease;
}

.media-quick-tabs a:hover,
.media-quick-tabs a.is-active {
    border-color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, .08);
    color: var(--primary-color, #2563eb);
}

.media-clean-mode-card,
.media-settings-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.media-clean-mode-card strong,
.media-settings-card strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.media-clean-mode-card p,
.media-settings-card p {
    margin: 0;
    color: var(--muted-color, #6b7280);
}

.media-settings-form {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.media-settings-form label {
    display: grid;
    gap: 4px;
    min-width: 140px;
    margin: 0;
}

.media-settings-form label span {
    font-size: 12px;
    color: var(--muted-color, #6b7280);
}

.media-filter-form--wide {
    grid-template-columns: repeat(6, minmax(130px, 1fr)) auto;
}

.media-summary-card.is-missing {
    border-color: rgba(220, 38, 38, .18);
    background: rgba(254, 226, 226, .55);
}

.media-missing-note {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
}

.media-preview-trigger {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    display: block;
}

.media-preview-trigger img {
    display: block;
}

.media-preview-modal[hidden] {
    display: none;
}

.media-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(15, 23, 42, .72);
    display: grid;
    place-items: center;
    padding: 22px;
}

.media-preview-dialog {
    position: relative;
    width: min(860px, 96vw);
    max-height: 92vh;
    overflow: auto;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .32);
    padding: 18px;
}

.media-preview-dialog img {
    display: block;
    width: 100%;
    max-height: 62vh;
    object-fit: contain;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
}

.media-preview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #111827;
    color: #fff;
    cursor: pointer;
}

.media-preview-info {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.media-preview-info h2 {
    margin: 0;
    font-size: 18px;
}

.media-preview-info p {
    margin: 0;
    color: var(--muted-color, #6b7280);
    word-break: break-all;
}

.media-preview-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.media-preview-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
}

@media (max-width: 1024px) {
    .media-filter-form--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .media-header-actions,
    .media-clean-mode-card,
    .media-settings-card,
    .media-settings-form {
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
    }

    .media-header-actions .btn,
    .media-settings-form .btn {
        width: 100%;
        justify-content: center;
    }

    .media-filter-form--wide {
        grid-template-columns: 1fr;
    }

    .media-quick-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .media-quick-tabs a {
        white-space: nowrap;
    }

    .media-preview-modal {
        padding: 10px;
    }

    .media-preview-dialog {
        padding: 12px;
        border-radius: 14px;
    }
}

/* Galeri Media - simplifikasi menu dan mobile friendly */
.media-gallery-header--simple {
    align-items: center;
}

.media-header-actions--simple {
    gap: 8px;
}

.media-header-actions--simple .btn {
    min-height: 40px;
}

.media-dashboard-card {
    display: grid;
    grid-template-columns: minmax(220px, .8fr) minmax(0, 1.8fr);
    align-items: stretch;
    gap: 14px;
    margin-bottom: 14px;
}

.media-dashboard-main {
    display: grid;
    gap: 6px;
    align-content: center;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border: 1px solid #dbeafe;
}

.media-dashboard-main span,
.media-mini-stat span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.media-dashboard-main strong {
    color: #0f172a;
    font-size: 22px;
    line-height: 1.15;
}

.media-dashboard-main small,
.media-mini-stat small {
    color: #64748b;
    font-size: 12px;
    line-height: 1.3;
}

.media-dashboard-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.media-mini-stat {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    transition: .16s ease;
}

.media-mini-stat:hover {
    transform: translateY(-1px);
    border-color: #cbd5e1;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.media-mini-stat strong {
    color: #0f172a;
    font-size: 22px;
    line-height: 1;
}

.media-mini-stat.is-unused {
    border-color: #fecaca;
    background: #fff7f7;
}

.media-mini-stat.is-pending {
    border-color: #fde68a;
    background: #fffbeb;
}

.media-mini-stat.is-used {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.media-mini-stat.is-missing {
    border-color: #fecaca;
    background: #fee2e2;
}

.media-quick-tabs--simple {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 14px;
}

.media-quick-tabs--simple a {
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 14px;
    white-space: nowrap;
}

.media-quick-tabs--simple i {
    font-size: 13px;
}

.media-toolbar-card {
    margin-bottom: 12px;
}

.media-toolbar-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(170px, .45fr) auto auto;
    gap: 10px;
    align-items: end;
}

.media-search-control {
    position: relative;
}

.media-search-control i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.media-search-control .form-control {
    padding-left: 38px;
}

.media-sort-control,
.media-advanced-grid label,
.media-settings-form--compact label {
    display: grid;
    gap: 5px;
    margin: 0;
}

.media-sort-control span,
.media-advanced-grid label span,
.media-editor-shortcuts > span,
.media-settings-form--compact label span {
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
}

.media-advanced-panel {
    grid-column: 1 / -1;
    margin-top: 2px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f8fafc;
}

.media-advanced-panel summary,
.media-settings-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 13px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.media-advanced-panel summary::-webkit-details-marker,
.media-settings-accordion summary::-webkit-details-marker {
    display: none;
}

.media-advanced-panel summary::after,
.media-settings-accordion summary::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #94a3b8;
    font-size: 12px;
    transition: transform .16s ease;
}

.media-advanced-panel[open] summary::after,
.media-settings-accordion[open] summary::after {
    transform: rotate(180deg);
}

.media-advanced-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0 13px 13px;
}

.media-editor-shortcuts {
    display: grid;
    gap: 5px;
}

.media-editor-shortcuts div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.media-editor-shortcuts a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.media-settings-accordion {
    margin-bottom: 12px;
    padding: 0;
    overflow: hidden;
}

.media-settings-accordion summary {
    padding: 13px 16px;
}

.media-settings-accordion summary span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.media-settings-accordion summary small {
    color: #64748b;
    font-weight: 700;
}

.media-settings-form--compact {
    justify-content: flex-start;
    padding: 0 16px 16px;
}

.media-clean-mode-card--compact {
    padding: 14px 16px;
}

.media-clean-mode-card--compact p {
    font-size: 13px;
}

.media-bulk-bar--simple {
    align-items: flex-start;
    padding: 12px;
    border-radius: 14px;
    margin-bottom: 12px;
}

.media-bulk-bar--simple .media-bulk-info {
    min-width: 220px;
}

.media-bulk-actions--simple {
    flex: 1;
}

.media-bulk-actions--simple .btn {
    min-height: 36px;
}

.media-bulk-bar--simple.is-quarantine {
    border-color: #fed7aa;
    background: #fff7ed;
}

.media-bulk-bar--simple.is-quarantine strong {
    color: #9a3412;
}

.media-gallery-grid--simple {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.media-card--simple .media-thumb-wrap {
    aspect-ratio: 1 / .78;
}

.media-card--simple .media-card-body {
    gap: 8px;
    padding: 12px;
}

.media-card--simple code {
    font-size: 11.5px;
    padding: 7px 9px;
}

.media-meta-list--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.media-meta-list--compact span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-location-details {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
}

.media-location-details summary {
    padding: 8px 10px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.media-location-details summary::-webkit-details-marker {
    display: none;
}

.media-location-details .media-location-list {
    padding: 0 10px 10px;
}

.media-card-actions--simple .btn {
    flex: 1 1 auto;
    justify-content: center;
}

@media (max-width: 1180px) {
    .media-dashboard-card {
        grid-template-columns: 1fr;
    }

    .media-dashboard-stats {
        grid-template-columns: repeat(5, minmax(120px, 1fr));
        overflow-x: auto;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .media-quick-tabs--simple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .media-gallery-grid--simple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .media-toolbar-form {
        grid-template-columns: 1fr 1fr;
    }

    .media-advanced-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .media-gallery-grid--simple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .media-gallery-header--simple {
        display: grid;
        gap: 12px;
    }

    .media-header-actions--simple {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .media-header-actions--simple form,
    .media-header-actions--simple .btn,
    .media-header-actions--simple button {
        width: 100%;
    }

    .media-dashboard-card {
        padding: 12px;
    }

    .media-dashboard-main {
        padding: 13px;
    }

    .media-dashboard-main strong {
        font-size: 18px;
    }

    .media-dashboard-stats {
        grid-template-columns: repeat(5, minmax(112px, 1fr));
        margin-inline: -2px;
    }

    .media-mini-stat {
        padding: 10px;
    }

    .media-mini-stat strong {
        font-size: 19px;
    }

    .media-quick-tabs--simple {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-inline: -2px;
        padding: 0 2px 5px;
        -webkit-overflow-scrolling: touch;
    }

    .media-quick-tabs--simple a {
        min-width: max-content;
        min-height: 38px;
        padding: 7px 10px;
        font-size: 12.5px;
    }

    .media-toolbar-form,
    .media-advanced-grid {
        grid-template-columns: 1fr;
    }

    .media-toolbar-form .btn {
        width: 100%;
        justify-content: center;
    }

    .media-settings-accordion summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .media-settings-form--compact {
        display: grid;
        grid-template-columns: 1fr;
    }

    .media-bulk-bar--simple {
        display: grid;
        gap: 10px;
    }

    .media-bulk-bar--simple .media-bulk-info {
        min-width: 0;
    }

    .media-bulk-actions--simple {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .media-bulk-actions--simple .btn,
    .media-select-all {
        width: 100%;
        justify-content: center;
    }

    .media-gallery-grid--simple {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .media-card--simple {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        align-items: stretch;
    }

    .media-card--simple .media-thumb-wrap {
        aspect-ratio: auto;
        min-height: 100%;
        border-right: 1px solid #edf2f7;
        border-bottom: 0;
    }

    .media-card--simple .media-thumb-wrap img {
        padding: 7px;
    }

    .media-card--simple .media-card-body {
        padding: 10px;
    }

    .media-card-title-row {
        display: grid;
        gap: 6px;
    }

    .media-card-title-row strong {
        font-size: 13px;
    }

    .media-card--simple code {
        max-height: 38px;
        overflow: hidden;
    }

    .media-meta-list--compact {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .media-protected-note,
    .media-pending-note,
    .media-missing-note {
        padding: 7px 8px;
    }

    .media-card-actions--simple {
        gap: 6px;
    }

    .media-card-actions--simple .btn {
        flex-basis: calc(50% - 4px);
        min-height: 34px;
        padding-inline: 8px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    .media-card--simple {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .media-select-box {
        top: 7px;
        left: 7px;
        width: 30px;
        height: 30px;
    }

    .media-select-box input {
        width: 16px;
        height: 16px;
    }

    .media-card-actions--simple .btn {
        flex-basis: 100%;
    }
}

/* Admin - Image Optimization clarity update */
.optimizer-summary-card {
    display: grid;
    gap: 14px;
    margin-bottom: 18px;
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 70%);
}

.optimizer-summary-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.optimizer-summary-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(22, 163, 74, .18);
}

.optimizer-summary-main h2 {
    margin: 0 0 5px;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.25;
}

.optimizer-summary-main p {
    margin: 0;
    color: #475569;
    line-height: 1.55;
}

.optimizer-path-pills,
.optimizer-toggle-card__paths {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.optimizer-path-pills span,
.optimizer-toggle-card__paths em {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #e8f7dd;
    color: #3d7d1d;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.25;
}

.optimizer-info-grid {
    align-items: start;
    margin-bottom: 18px;
}

.optimizer-status-card .admin-card-header {
    margin-bottom: 12px;
}

.settings-list-compact {
    gap: 8px;
}

.settings-list-compact > div {
    min-height: 42px;
    padding: 9px 11px;
}

.optimizer-folder-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.optimizer-folder-list > div {
    min-width: 0;
}

.optimizer-module-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.optimizer-toggle-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.optimizer-toggle-card:hover {
    border-color: #86d23f;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    transform: translateY(-1px);
}

.optimizer-toggle-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #16a34a;
}

.optimizer-toggle-card__body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.optimizer-toggle-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f172a;
    font-weight: 900;
    line-height: 1.25;
}

.optimizer-toggle-card__title i {
    color: #16a34a;
    font-size: 14px;
}

.optimizer-toggle-card small {
    color: #64748b;
    line-height: 1.45;
}

.optimizer-toggle-card__paths em {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .optimizer-folder-list,
    .optimizer-module-toggle-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .optimizer-summary-card,
    .optimizer-info-grid,
    .image-optimizer-form .admin-card {
        margin-bottom: 14px;
    }

    .optimizer-summary-main {
        gap: 11px;
    }

    .optimizer-summary-icon {
        width: 38px;
        height: 38px;
        border-radius: 13px;
    }

    .optimizer-summary-main h2 {
        font-size: 16px;
    }

    .optimizer-path-pills {
        flex-direction: column;
        align-items: stretch;
    }

    .optimizer-path-pills span,
    .optimizer-toggle-card__paths em {
        justify-content: center;
        border-radius: 10px;
        white-space: normal;
        word-break: break-word;
        text-align: center;
    }

    .settings-list-compact > div {
        min-height: 40px;
    }

    .optimizer-toggle-card {
        padding: 13px;
        border-radius: 14px;
    }

    .optimizer-toggle-card:hover {
        transform: none;
    }
}

/* Admin - Image Optimization mobile simplification */
.image-optimizer-page-header {
    margin: 0 0 14px;
    padding: 0;
}

.image-optimizer-page-header h1 {
    margin: 0 0 8px;
    color: #0f172a;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.08;
    letter-spacing: -.035em;
}

.image-optimizer-page-header p {
    max-width: 760px;
    margin: 0;
    color: #334155;
    font-size: 16px;
    line-height: 1.55;
}

@media (max-width: 640px) {
    .image-optimizer-page-header {
        margin: 0 0 12px;
        padding: 0 2px;
    }

    .image-optimizer-page-header h1 {
        margin-bottom: 8px;
        font-size: 32px;
        line-height: 1.1;
    }

    .image-optimizer-page-header p {
        font-size: 15px;
        line-height: 1.45;
    }

    .optimizer-info-grid {
        gap: 12px;
        margin-bottom: 14px;
    }

    .optimizer-status-card .admin-card-header {
        margin-bottom: 10px;
    }

    .optimizer-status-card .admin-card-header h2 {
        font-size: 24px;
        line-height: 1.2;
    }

    .optimizer-status-card .admin-card-header p {
        margin-top: 5px;
        font-size: 14px;
        line-height: 1.4;
    }
}

/* Maintenance Mode */
.admin-maintenance-alert {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 11px;
    border: 1px solid #fecaca;
    border-radius: 999px;
    color: #991b1b;
    background: #fef2f2;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.admin-maintenance-alert:hover {
    color: #7f1d1d;
    background: #fee2e2;
}

.admin-menu-badge-warning {
    color: #92400e;
    background: #fef3c7;
}

.maintenance-admin-header {
    align-items: flex-start;
}

.maintenance-admin-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.maintenance-admin-actions form {
    margin: 0;
}

.maintenance-status-grid {
    margin-bottom: 18px;
}

.maintenance-status-card {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e5e7eb;
}

.maintenance-status-card h2 {
    margin: 0 0 5px;
}

.maintenance-status-card p {
    margin: 0;
    color: #64748b;
    line-height: 1.5;
}

.maintenance-status-icon {
    display: grid;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 18px;
    font-size: 22px;
}

.maintenance-status-card.is-active {
    border-color: #fecaca;
    background: linear-gradient(135deg, #fff7f7, #fff);
}

.maintenance-status-card.is-active .maintenance-status-icon {
    color: #991b1b;
    background: #fee2e2;
}

.maintenance-status-card.is-inactive {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #fff);
}

.maintenance-status-card.is-inactive .maintenance-status-icon {
    color: #166534;
    background: #dcfce7;
}

.maintenance-toggle-stack {
    display: grid;
    gap: 12px;
}

.maintenance-admin-form textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.maintenance-page-body {
    min-height: 100vh;
    margin: 0;
    color: #f8fafc;
    background:
        radial-gradient(circle at top left, rgba(220, 38, 38, .24), transparent 34%),
        radial-gradient(circle at bottom right, rgba(127, 29, 29, .28), transparent 36%),
        linear-gradient(135deg, #0b0507 0%, #16080b 48%, #250d12 100%);
}

.maintenance-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.maintenance-card {
    position: relative;
    width: min(100%, 640px);
    padding: clamp(26px, 6vw, 44px);
    border: 1px solid rgba(248, 113, 113, .28);
    border-radius: 28px;
    background: rgba(15, 7, 10, .86);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
    text-align: center;
    overflow: hidden;
}

.maintenance-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(120deg, rgba(248, 113, 113, .14), transparent 36%, rgba(127, 29, 29, .15));
}

.maintenance-card > * {
    position: relative;
    z-index: 1;
}

.maintenance-preview-badge {
    display: inline-flex;
    margin-bottom: 16px;
    padding: 6px 10px;
    border: 1px solid rgba(251, 191, 36, .45);
    border-radius: 999px;
    color: #fef3c7;
    background: rgba(146, 64, 14, .28);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.maintenance-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-bottom: 18px;
}

.maintenance-brand img {
    max-width: 180px;
    max-height: 54px;
    object-fit: contain;
}

.maintenance-brand span {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .02em;
}

.maintenance-icon {
    display: grid;
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid rgba(248, 113, 113, .35);
    border-radius: 24px;
    color: #fecaca;
    background: rgba(127, 29, 29, .34);
    font-size: 30px;
}

.maintenance-kicker {
    margin: 0 0 8px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.maintenance-card h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 6vw, 44px);
    line-height: 1.12;
}

.maintenance-message {
    max-width: 520px;
    margin: 16px auto 0;
    color: #e5e7eb;
    font-size: 16px;
    line-height: 1.7;
}

.maintenance-estimate,
.maintenance-countdown,
.maintenance-overdue,
.maintenance-footnote {
    max-width: 480px;
    margin: 18px auto 0;
    border-radius: 18px;
}

.maintenance-estimate,
.maintenance-countdown {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(248, 113, 113, .25);
    background: rgba(69, 10, 10, .32);
}

.maintenance-estimate span,
.maintenance-countdown span {
    color: #fca5a5;
    font-size: 13px;
    font-weight: 800;
}

.maintenance-estimate strong,
.maintenance-countdown strong {
    color: #fff;
    font-size: clamp(18px, 5vw, 26px);
    line-height: 1.25;
}

.maintenance-overdue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    color: #fef3c7;
    background: rgba(146, 64, 14, .3);
}

.maintenance-footnote {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 13px;
}

@media (max-width: 720px) {
    .admin-maintenance-alert span {
        display: none;
    }

    .maintenance-page-body {
        min-height: 100dvh;
    }

    .maintenance-page {
        min-height: 100dvh;
        align-items: start;
        padding: 18px 16px 22px;
    }

    .maintenance-card {
        margin-top: 0;
    }

    .maintenance-admin-header,
    .maintenance-admin-actions {
        align-items: stretch;
        justify-content: stretch;
    }

    .maintenance-admin-actions .btn,
    .maintenance-admin-actions form,
    .maintenance-admin-actions button {
        width: 100%;
    }

    .maintenance-status-card {
        align-items: flex-start;
    }

    .maintenance-card {
        border-radius: 22px;
    }

    .maintenance-message {
        font-size: 14px;
    }
}


/* Home kategori cepat: produk kategori dimuat hanya saat chip diklik. */
.home-category-result[hidden],
[data-home-default-products][hidden] {
    display: none !important;
}

.section-title-icon.is-category {
    background: linear-gradient(135deg, #dcfce7 0%, #86efac 100%);
    color: #15803d;
}

.home-ajax-category-section {
    animation: tdHomeCategoryFade 0.18s ease;
}

.home-category-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 132px;
    padding: 22px;
    border: 1px solid #e5eaf1;
    border-radius: 18px;
    background: #ffffff;
    color: #4b5563;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    font-size: 14px;
}

.home-category-loading i {
    color: #16a34a;
    animation: tdHomeCategorySpin 0.85s linear infinite;
}

.home-category-see-all {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.home-category-see-all .section-link-modern {
    min-width: 158px;
    text-transform: uppercase;
}

.home-category-empty {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.category-chip.is-loading {
    pointer-events: none;
    opacity: 0.72;
}

@keyframes tdHomeCategorySpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes tdHomeCategoryFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    .home-category-loading {
        min-height: 110px;
        padding: 18px;
        border-radius: 14px;
        font-size: 13px;
    }

    .home-category-see-all {
        margin-top: 15px;
    }

    .home-category-see-all .section-link-modern {
        min-width: 148px;
    }
}

/* Tombol Muat Lagi kategori Home: maksimal preview 20 produk sebelum masuk halaman kategori SEO. */
.home-category-count {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

button.section-link-modern.home-category-load-more {
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

button.section-link-modern.home-category-load-more:disabled,
button.section-link-modern.home-category-load-more.is-loading {
    cursor: wait;
    opacity: 0.72;
}

button.section-link-modern.home-category-load-more.is-loading i {
    animation: tdHomeCategorySpin 0.85s linear infinite;
}

@media (max-width: 768px) {
    .home-ajax-category-section .section-heading {
        align-items: flex-start;
        gap: 8px;
    }

    .home-category-count {
        font-size: 12px;
    }
}

/* Article Reading Experience 20260624
   Merapikan detail artikel: estimasi waktu baca, daftar isi otomatis, tombol share bawah konten, dan area lanjut baca. */
.article-detail-wrap {
    scroll-behavior: smooth;
}

.article-detail-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.article-featured-image img {
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

.article-toc-box,
.article-share-box,
.article-more-box {
    border: 1px solid #e3eadf;
    border-radius: 18px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fcf3 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

.article-toc-box {
    margin: 0 0 22px;
    padding: 16px;
}

.article-toc-head,
.article-share-text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.article-toc-icon,
.article-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: #ecfdf5;
    color: #15803d;
}

.article-toc-head h2,
.article-share-text h2,
.article-more-box h2 {
    margin: 0 0 4px;
    color: #111827;
    font-size: 18px;
    line-height: 1.3;
}

.article-toc-head p,
.article-share-text p,
.article-more-box p {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.55;
}

.article-toc-list {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.article-toc-list li {
    margin: 0;
}

.article-toc-list li.is-sub-item {
    padding-left: 18px;
}

.article-toc-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: rgba(255, 255, 255, .82);
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.article-toc-list a::before {
    content: '';
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #86d23f;
}

.article-toc-list a:hover,
.article-toc-list a:focus-visible {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.article-share-box {
    margin: 26px 0 0;
    padding: 16px;
}

.article-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.article-share-button,
.article-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    border: 1px solid #dce7d5;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2937;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease;
}

.article-share-button {
    padding: 0 13px;
}

.article-share-button:hover,
.article-share-button:focus-visible,
.article-share-button.is-copied,
.article-more-link:hover,
.article-more-link:focus-visible {
    border-color: #86d23f;
    background: #f0fdf4;
    color: #166534;
    box-shadow: 0 8px 18px rgba(22, 101, 52, .08);
    transform: translateY(-1px);
}

.article-share-button i,
.article-more-link i {
    font-size: 14px;
}

.article-share-status {
    min-height: 18px;
    margin: 10px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.article-share-status[data-type="success"] {
    color: #15803d;
}

.article-share-status[data-type="error"] {
    color: #b91c1c;
}

.article-more-section {
    margin-top: 22px;
    margin-bottom: 30px;
}

.article-more-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
}

.article-more-link {
    flex: 0 0 auto;
    padding: 0 14px;
}

.article-content-body h2[id],
.article-content-body h3[id] {
    scroll-margin-top: 82px;
}

@media (min-width: 1025px) {
    body.frontend-body .article-detail-wrap {
        max-width: 820px;
    }

    body.frontend-body .article-related-products,
    body.frontend-body .article-related-section,
    body.frontend-body .article-more-section {
        max-width: min(100% - var(--frontend-inner-gutter) * 2, 820px);
    }

    body.frontend-body .article-featured-image img {
        max-height: 380px;
    }
}

@media (max-width: 768px) {
    body.frontend-body .article-detail-header h1,
    .article-detail-header h1 {
        font-size: 22px !important;
        line-height: 1.22 !important;
    }

    body.frontend-body .article-detail-header p,
    .article-detail-header p {
        font-size: 14px !important;
        line-height: 1.62 !important;
    }

    body.frontend-body .article-featured-image,
    .article-featured-image {
        margin: 13px 0 17px !important;
    }

    body.frontend-body .article-featured-image img,
    .article-featured-image img {
        min-height: 148px;
        max-height: 230px !important;
        border-radius: 14px !important;
        object-fit: cover;
    }

    .article-toc-box,
    .article-share-box,
    .article-more-box {
        border-radius: 15px;
        box-shadow: 0 7px 18px rgba(15, 23, 42, .04);
    }

    .article-toc-box,
    .article-share-box {
        padding: 14px;
    }

    .article-toc-icon,
    .article-share-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        font-size: 13px;
    }

    .article-toc-head h2,
    .article-share-text h2,
    .article-more-box h2 {
        font-size: 16px;
    }

    .article-toc-list {
        gap: 7px;
        margin-top: 12px;
    }

    .article-toc-list li.is-sub-item {
        padding-left: 10px;
    }

    .article-toc-list a {
        min-height: 32px;
        padding: 7px 9px;
        border-radius: 11px;
        font-size: 13px;
        font-weight: 600;
    }

    .article-share-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .article-share-button {
        width: 100%;
        min-height: 36px;
        padding: 0 9px;
        font-size: 12px;
    }

    .article-more-section {
        margin-top: 18px;
        margin-bottom: 26px;
    }

    .article-more-box {
        align-items: stretch;
        flex-direction: column;
        padding: 14px;
    }

    .article-more-link {
        width: 100%;
        min-height: 38px;
    }
}

@media (max-width: 380px) {
    .article-share-actions {
        grid-template-columns: 1fr;
    }
}

/* Article Share Refinement 20260624
   Merapikan share box mobile dan menambahkan QR Code khusus desktop. */
.article-share-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    align-items: stretch;
    gap: 16px;
}

.article-share-main {
    min-width: 0;
}

.article-share-actions {
    align-items: center;
}

.article-share-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 14px;
    border-left: 1px solid #e3eadf;
}

.article-share-qr-card {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: rgba(255, 255, 255, .9);
    text-align: center;
}

.article-share-qr-card canvas {
    display: block;
    width: 150px;
    height: 150px;
    max-width: 100%;
    margin: 0 auto 8px;
    border-radius: 12px;
    background: #ffffff;
}

.article-share-qr-card strong {
    display: block;
    color: #111827;
    font-size: 13px;
    line-height: 1.35;
}

.article-share-qr-card p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}

.article-share-qr-card.is-qr-error {
    display: none;
}

@media (max-width: 768px) {
    .article-share-box {
        margin-top: 20px;
        padding: 12px !important;
    }

    .article-share-layout {
        display: block;
    }

    .article-share-text {
        align-items: center;
        gap: 9px;
    }

    .article-share-icon {
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        border-radius: 10px;
        font-size: 12px;
    }

    .article-share-text h2 {
        margin-bottom: 0;
        font-size: 15px !important;
        line-height: 1.25;
    }

    .article-share-text p {
        display: none;
    }

    .article-share-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        margin-top: 11px;
    }

    .article-share-button {
        justify-content: center;
        min-height: 34px;
        padding: 0 8px !important;
        border-radius: 14px;
        font-size: 12px !important;
        font-weight: 600;
    }

    .article-share-button i {
        font-size: 13px;
    }

    .article-share-copy-button {
        grid-column: 1 / -1;
    }

    .article-share-status {
        min-height: 0;
        margin-top: 7px;
        font-size: 11px;
    }

    .article-share-qr {
        display: none;
    }

    .article-more-section {
        margin-top: 16px;
        margin-bottom: 24px;
    }

    .article-more-box {
        gap: 10px;
        padding: 12px !important;
        border-radius: 15px;
    }

    .article-more-box h2 {
        font-size: 15px !important;
    }

    .article-more-box p {
        display: none;
    }

    .article-more-link {
        min-height: 35px;
        font-size: 12px;
        font-weight: 600;
    }
}

@media (max-width: 360px) {
    .article-share-actions {
        grid-template-columns: 1fr;
    }

    .article-share-copy-button {
        grid-column: auto;
    }
}


/* Article Share Desktop Compact 20260624
   Merapikan box share artikel desktop supaya lebih minimalis, tidak terlalu tinggi, dan QR Code tidak mendominasi. */
@media (min-width: 769px) {
    .article-share-box {
        margin-top: 22px;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .article-share-layout {
        grid-template-columns: minmax(0, 1fr) 128px;
        align-items: center;
        gap: 12px;
    }

    .article-share-main {
        display: grid;
        grid-template-columns: minmax(175px, auto) minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
        row-gap: 0;
    }

    .article-share-text {
        align-items: center;
        gap: 9px;
    }

    .article-share-icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        border-radius: 11px;
        font-size: 13px;
    }

    .article-share-text h2 {
        margin-bottom: 0;
        font-size: 16px;
        line-height: 1.25;
    }

    .article-share-text p {
        display: none;
    }

    .article-share-actions {
        margin-top: 0;
        gap: 7px;
    }

    .article-share-button {
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
        font-weight: 600;
    }

    .article-share-button i {
        font-size: 13px;
    }

    .article-share-status {
        grid-column: 2 / 3;
        min-height: 0;
        margin: 5px 0 0;
        font-size: 11px;
    }

    .article-share-qr {
        align-self: center;
        padding-left: 12px;
    }

    .article-share-qr-card {
        padding: 8px;
        border-radius: 13px;
    }

    .article-share-qr-card canvas {
        width: 98px;
        height: 98px;
        margin-bottom: 5px;
        border-radius: 8px;
    }

    .article-share-qr-card strong {
        font-size: 11px;
        line-height: 1.2;
    }

    .article-share-qr-card p {
        display: none;
    }

    .article-more-section {
        margin-top: 18px;
        margin-bottom: 24px;
    }

    .article-more-box {
        padding: 13px 14px;
        border-radius: 16px;
    }

    .article-more-box h2 {
        margin-bottom: 2px;
        font-size: 16px;
    }

    .article-more-box p {
        font-size: 12px;
    }

    .article-more-link {
        min-height: 34px;
        padding: 0 12px;
        font-size: 12px;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .article-share-main {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .article-share-status {
        grid-column: 1 / -1;
    }
}

/* Article Share QR Toggle 20260624
   QR Code artikel dibuat muncul setelah tombol diklik agar tampilan desktop tetap ringkas. */
.article-share-layout {
    display: block !important;
}

.article-share-qr-toggle {
    display: inline-flex;
}

.article-share-button.is-qr-open {
    border-color: #86d23f;
    background: #f0fdf4;
    color: #166534;
    box-shadow: 0 8px 18px rgba(22, 101, 52, .08);
}

.article-share-qr-panel[hidden] {
    display: none !important;
}

.article-share-qr-panel {
    margin-top: 9px;
}

.article-share-qr-panel .article-share-qr-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto;
    max-width: 100%;
    padding: 9px 11px;
    border: 1px solid #dce7d5;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    text-align: left;
    box-shadow: none;
}

.article-share-qr-panel .article-share-qr-card canvas {
    flex: 0 0 86px;
    width: 86px;
    height: 86px;
    margin: 0;
    border-radius: 9px;
    background: #ffffff;
}

.article-share-qr-panel .article-share-qr-card strong {
    display: block;
    color: #111827;
    font-size: 12px;
    line-height: 1.25;
}

.article-share-qr-panel .article-share-qr-card p {
    display: block;
    max-width: 160px;
    margin: 3px 0 0;
    color: #64748b;
    font-size: 11px;
    line-height: 1.35;
}

.article-share-qr-panel .article-share-qr-card.is-qr-error {
    display: none;
}

@media (min-width: 769px) {
    .article-share-main {
        display: grid;
        grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
        align-items: center;
        column-gap: 14px;
        row-gap: 0;
    }

    .article-share-actions {
        margin-top: 0;
        gap: 6px;
    }

    .article-share-status,
    .article-share-qr-panel {
        grid-column: 2 / 3;
    }

    .article-share-qr-panel {
        justify-self: start;
    }
}

@media (max-width: 768px) {
    .article-share-qr-toggle,
    .article-share-qr-panel {
        display: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .article-share-main {
        grid-template-columns: 1fr;
        row-gap: 9px;
    }

    .article-share-status,
    .article-share-qr-panel {
        grid-column: 1 / -1;
    }
}

/* Article Share Desktop Toolbar Final 20260624
   Area share artikel desktop dibuat seperti toolbar ringkas; QR muncul sebagai popover setelah klik. */
.article-share-title-desktop,
.article-share-copy-text-short {
    display: none;
}

@media (min-width: 769px) {
    .article-share-box {
        margin-top: 20px !important;
        padding: 10px 12px !important;
        border-radius: 15px !important;
        box-shadow: 0 7px 18px rgba(15, 23, 42, .035) !important;
        overflow: visible;
    }

    .article-share-main {
        position: relative;
        display: flex !important;
        align-items: center;
        gap: 12px;
        min-height: 34px;
    }

    .article-share-text {
        flex: 0 0 auto;
        align-items: center !important;
        gap: 7px !important;
        min-width: 0;
    }

    .article-share-title-mobile {
        display: none;
    }

    .article-share-title-desktop {
        display: inline;
    }

    .article-share-icon {
        flex: 0 0 28px !important;
        width: 28px !important;
        height: 28px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
    }

    .article-share-text h2 {
        margin: 0 !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        white-space: nowrap;
    }

    .article-share-text p {
        display: none !important;
    }

    .article-share-actions {
        display: flex !important;
        flex: 1 1 auto;
        align-items: center;
        gap: 6px !important;
        margin-top: 0 !important;
        min-width: 0;
    }

    .article-share-button {
        min-height: 30px !important;
        padding: 0 9px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        gap: 6px !important;
        white-space: nowrap;
    }

    .article-share-button i {
        font-size: 12px !important;
    }

    .article-share-x-button {
        width: 30px;
        padding: 0 !important;
    }

    .article-share-x-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .article-share-copy-text-full {
        display: none;
    }

    .article-share-copy-text-short {
        display: inline;
    }

    .article-share-status {
        position: absolute;
        left: 0;
        top: calc(100% + 4px);
        min-height: 0 !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        pointer-events: none;
    }

    .article-share-qr-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 30;
        margin: 0 !important;
        filter: drop-shadow(0 12px 24px rgba(15, 23, 42, .12));
    }

    .article-share-qr-panel .article-share-qr-card {
        padding: 9px 10px !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .article-share-qr-panel .article-share-qr-card canvas {
        flex: 0 0 82px !important;
        width: 82px !important;
        height: 82px !important;
    }

    .article-share-qr-panel .article-share-qr-card strong {
        font-size: 12px !important;
    }

    .article-share-qr-panel .article-share-qr-card p {
        max-width: 140px !important;
        font-size: 10.5px !important;
    }

    .article-more-section {
        margin-top: 18px !important;
    }

    .article-more-box {
        padding: 12px 14px !important;
    }
}

@media (min-width: 769px) and (max-width: 920px) {
    .article-share-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .article-share-actions {
        width: 100%;
    }

    .article-share-status {
        position: static;
        width: 100%;
        margin-top: -3px !important;
    }
}

@media (max-width: 768px) {
    .article-share-title-mobile,
    .article-share-copy-text-full {
        display: inline;
    }

    .article-share-title-desktop,
    .article-share-copy-text-short {
        display: none !important;
    }
}

/* Article Share Desktop Finishing 20260624
   Toolbar share desktop dibuat lebih kecil, soft, dan tidak memenuhi lebar konten jika tidak perlu. */
@media (min-width: 769px) {
    .article-share-box {
        display: block !important;
        width: fit-content !important;
        max-width: 100% !important;
        margin-top: 16px !important;
        padding: 7px 9px !important;
        border-color: #e7eee2 !important;
        border-radius: 999px !important;
        background: rgba(250, 253, 246, .86) !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, .026) !important;
    }

    .article-share-main {
        gap: 9px !important;
        min-height: 28px !important;
    }

    .article-share-text {
        gap: 6px !important;
    }

    .article-share-icon {
        flex-basis: 26px !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        background: #eefdf3 !important;
    }

    .article-share-text h2 {
        font-size: 13px !important;
        font-weight: 650 !important;
        color: #111827 !important;
    }

    .article-share-actions {
        flex: 0 1 auto !important;
        gap: 5px !important;
    }

    .article-share-button {
        min-height: 28px !important;
        padding: 0 8px !important;
        border-color: #e1eadb !important;
        background: rgba(255, 255, 255, .94) !important;
        color: #1f2937 !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        gap: 5px !important;
        box-shadow: none !important;
    }

    .article-share-button i {
        font-size: 11.5px !important;
    }

    .article-share-x-button {
        width: 28px !important;
        min-width: 28px !important;
    }

    .article-share-button:hover,
    .article-share-button:focus-visible,
    .article-share-button.is-copied,
    .article-share-button.is-qr-open {
        border-color: #a7e38e !important;
        background: #f5fff0 !important;
        color: #166534 !important;
        box-shadow: 0 5px 12px rgba(22, 101, 52, .055) !important;
    }

    .article-share-status {
        top: calc(100% + 3px) !important;
        font-size: 10.5px !important;
    }

    .article-share-qr-panel {
        top: calc(100% + 6px) !important;
        right: 0 !important;
    }

    .article-share-qr-panel .article-share-qr-card {
        padding: 8px 9px !important;
        border-color: #e1eadb !important;
        border-radius: 13px !important;
    }

    .article-share-qr-panel .article-share-qr-card canvas {
        flex-basis: 78px !important;
        width: 78px !important;
        height: 78px !important;
    }

    .article-more-section {
        margin-top: 14px !important;
        margin-bottom: 22px !important;
    }

    .article-more-box {
        padding: 11px 13px !important;
        border-color: #e7eee2 !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, .026) !important;
    }
}

@media (min-width: 769px) and (max-width: 920px) {
    .article-share-box {
        width: 100% !important;
        border-radius: 15px !important;
    }
}

/* Revisi halaman /artikel: katalog artikel compact, aman untuk desktop dan mobile. */
.article-index-breadcrumb-section {
    padding-top: 18px;
}

.article-index-hero {
    padding: 16px 0 10px;
}

.article-index-hero h1 {
    margin-bottom: 6px;
    font-size: 30px;
    line-height: 1.2;
}

.article-index-hero p {
    width: min(100%, 760px);
    margin-inline: auto;
    color: #5f6b7a;
    font-size: 15px;
    line-height: 1.55;
}

.article-search-wrap {
    margin-bottom: 14px !important;
}

.article-search-wrap .article-search-form {
    width: min(100%, 620px);
    height: 48px;
    min-height: 48px;
    border-color: #e8edf4;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}

.article-search-wrap .article-search-form input[type="text"] {
    height: 48px;
    font-size: 15px;
}

.article-search-wrap .article-search-form button {
    width: 56px;
    height: 48px;
    font-size: 26px;
}

.article-index-category-section {
    margin-bottom: 18px;
}

.article-index-category-section .category-chips {
    gap: 8px;
}

.article-index-category-section .category-chip {
    min-width: 0;
    padding: 8px 15px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}

.article-index-list-section {
    margin-bottom: 34px;
}

.article-index-toolbar {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 12px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.article-index-toolbar span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 11px;
    border: 1px solid #e8edf4;
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
}

.article-card-grid.article-index-grid,
body.frontend-body .article-card-grid.article-index-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.article-index-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    border-color: #e9edf3;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.article-index-card:hover {
    transform: translateY(-2px);
    border-color: #dbead4;
    box-shadow: 0 14px 28px rgba(15, 23, 42, .07);
}

.article-index-card-image {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 205px;
    overflow: hidden;
    background: #f3f6fb;
}

.article-index-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .22s ease;
}

.article-index-card:hover .article-index-card-image img {
    transform: scale(1.025);
}

.article-index-card-badge {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 20px);
    min-height: 26px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 999px;
    background: rgba(255, 255, 255, .92);
    color: #166534;
    font-size: 11.5px;
    font-weight: 750;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .13);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-index-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 13px 14px 14px !important;
}

.article-index-card h2 {
    display: -webkit-box;
    min-height: calc(1.3em * 2);
    margin: 0 0 7px !important;
    color: #111827;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 700;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-index-card h2 a {
    color: inherit;
}

.article-index-card p {
    display: -webkit-box;
    min-height: calc(1.55em * 2);
    margin: 0 0 11px !important;
    color: #5f6b7a;
    font-size: 13px !important;
    line-height: 1.55 !important;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.article-index-card-meta {
    gap: 7px 10px !important;
    margin-top: auto;
    color: #718096;
    font-size: 11.8px !important;
    line-height: 1.3;
}

.article-index-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.article-index-read-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 32px;
    margin-top: 11px;
    padding: 0 11px;
    border: 1px solid #dcead8;
    border-radius: 999px;
    background: #fbfff8;
    color: #166534;
    font-size: 12.5px;
    font-weight: 750;
    text-decoration: none;
}

.article-index-read-link:hover,
.article-index-read-link:focus-visible {
    border-color: #9bdc82;
    background: #f3ffe9;
    color: #14532d;
}

.article-index-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 680px);
    margin: 4px auto 18px;
    padding: 24px 18px;
    border-radius: 18px;
    text-align: center;
}

.article-index-empty > i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 14px;
    background: #f0fdf4;
    color: #15803d;
    font-size: 20px;
}

.article-index-empty strong {
    display: block;
    margin-bottom: 6px;
    color: #111827;
    font-size: 18px;
}

.article-index-empty p {
    max-width: 520px;
    margin: 0 auto;
    color: #667085;
    font-size: 14px;
    line-height: 1.6;
}

.article-index-empty-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-top: 14px;
    padding: 0 16px;
    border: 1px solid #dcead8;
    border-radius: 999px;
    background: #fbfff8;
    color: #166534;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}

.article-index-empty-button:hover,
.article-index-empty-button:focus-visible {
    border-color: #9bdc82;
    background: #f3ffe9;
}

@media (max-width: 980px) {
    .article-card-grid.article-index-grid,
    body.frontend-body .article-card-grid.article-index-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .article-index-breadcrumb-section {
        padding-top: 10px;
    }

    .article-index-hero {
        padding: 12px 0 8px;
        text-align: left;
    }

    .article-index-hero h1 {
        font-size: 25px;
    }

    .article-index-hero p {
        margin-inline: 0;
        font-size: 13.5px;
        line-height: 1.55;
    }

    .article-search-wrap .article-search-form {
        width: 100%;
        height: 46px;
        min-height: 46px;
    }

    .article-search-wrap .article-search-form input[type="text"] {
        height: 46px;
        font-size: 14px;
    }

    .article-search-wrap .article-search-form button {
        width: 50px;
        height: 46px;
        font-size: 23px;
    }

    .article-index-category-section {
        margin-bottom: 14px;
    }

    .article-index-category-section .category-chips {
        justify-content: flex-start;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 2px;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .article-index-category-section .category-chips::-webkit-scrollbar {
        display: none;
    }

    .article-index-category-section .category-chip {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 8px 12px;
        border-radius: 999px;
        font-size: 12px;
    }

    .article-index-toolbar {
        margin-bottom: 10px;
        font-size: 12px;
    }

    .article-index-toolbar span {
        min-height: 28px;
        padding: 5px 10px;
    }

    .article-card-grid.article-index-grid,
    body.frontend-body .article-card-grid.article-index-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .article-index-card {
        border-radius: 14px;
        box-shadow: 0 6px 16px rgba(15, 23, 42, .045);
    }

    .article-index-card-image {
        max-height: none;
        border-radius: 0;
    }

    .article-index-card-body {
        padding: 12px 13px 13px !important;
    }

    .article-index-card h2 {
        font-size: 16.5px !important;
        line-height: 1.32 !important;
    }

    .article-index-card p {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .article-index-card-meta {
        font-size: 11.5px !important;
    }

    .article-index-read-link {
        min-height: 31px;
        margin-top: 10px;
        padding-inline: 10px;
        font-size: 12px;
    }
}

/* Checkout modern visual refresh - tidak mengubah alur/fungsi checkout */
body.frontend-body .checkout-page-simple {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto 46px;
}

body.frontend-body .checkout-back-link {
    width: 38px;
    height: 38px;
    margin: 10px 0 8px;
    color: #111827;
    background: #ffffff;
    border: 1px solid #e6eaf0;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

body.frontend-body .checkout-back-link:hover {
    color: #2563eb;
    border-color: #cfe0ff;
    background: #f8fbff;
}

body.frontend-body .checkout-modern-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 0 0 14px;
    padding: 16px 18px;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 244, .95), rgba(255, 255, 255, .96));
    box-shadow: 0 12px 26px rgba(15, 23, 42, .045);
}

body.frontend-body .checkout-modern-eyebrow {
    margin: 0 0 4px;
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body.frontend-body .checkout-modern-hero h1 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

body.frontend-body .checkout-modern-hero p:not(.checkout-modern-eyebrow) {
    margin: 5px 0 0;
    color: #667085;
    font-size: 14px;
    line-height: 1.55;
}

body.frontend-body .checkout-modern-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
    max-width: 260px;
}

body.frontend-body .checkout-modern-steps span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid #dff3da;
    border-radius: 999px;
    background: #ffffff;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.frontend-body .checkout-modern-steps i {
    color: #65b82f;
    font-size: 12px;
}

body.frontend-body .checkout-form-simple {
    gap: 13px;
}

body.frontend-body .checkout-panel {
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .98);
    padding: 16px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .045);
}

body.frontend-body .checkout-summary-panel {
    margin-top: 0;
}

body.frontend-body .checkout-section-head {
    margin-bottom: 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid #eef1f5;
}

body.frontend-body .checkout-section-head-modern {
    align-items: center;
}

body.frontend-body .checkout-section-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

body.frontend-body .checkout-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f0fdf4;
    color: #42a820;
    font-size: 14px;
}

body.frontend-body .checkout-section-head h1,
body.frontend-body .checkout-section-head h2 {
    margin: 0;
    color: #111827;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: none;
}

body.frontend-body .checkout-section-head > span {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

body.frontend-body .checkout-order-item {
    grid-template-columns: 90px 1fr;
    gap: 13px;
    padding: 10px;
    border: 1px solid #eef1f5;
    border-radius: 16px;
    background: #fbfcfe;
    box-shadow: none;
}

body.frontend-body .checkout-order-thumb {
    width: 90px;
    height: 70px;
    border-radius: 12px;
    background: #eef2f7;
}

body.frontend-body .checkout-order-info strong {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}

body.frontend-body .checkout-order-info span {
    color: #667085;
    font-size: 13px;
}

body.frontend-body .checkout-order-info b {
    color: #e11d48;
    font-size: 15px;
    font-weight: 700;
}

body.frontend-body .checkout-form-grid {
    gap: 13px 14px;
}

body.frontend-body .checkout-form-grid label,
body.frontend-body .checkout-coupon-group label {
    margin-bottom: 7px;
    color: #1f2937;
    font-size: 13px;
    font-weight: 750;
}

body.frontend-body .checkout-form-grid label strong {
    color: #ef4444;
}

body.frontend-body .checkout-form-grid label span {
    color: #98a2b3;
    font-weight: 500;
}

body.frontend-body .checkout-form-simple input[type="text"],
body.frontend-body .checkout-form-simple input[type="tel"],
body.frontend-body .checkout-form-simple input[type="email"],
body.frontend-body .checkout-page-simple .checkout-form-grid input#checkoutCustomerWhatsapp,
body.frontend-body .checkout-page-simple .checkout-form-grid input[name="customer_whatsapp"] {
    min-height: 46px !important;
    padding: 11px 13px !important;
    border: 1px solid #dfe4ea !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
}

body.frontend-body .checkout-form-simple input::placeholder {
    color: #98a2b3;
    opacity: 1;
}

body.frontend-body .checkout-form-simple input[type="text"]:focus,
body.frontend-body .checkout-form-simple input[type="tel"]:focus,
body.frontend-body .checkout-form-simple input[type="email"]:focus,
body.frontend-body .checkout-page-simple .checkout-form-grid input#checkoutCustomerWhatsapp:focus,
body.frontend-body .checkout-page-simple .checkout-form-grid input[name="customer_whatsapp"]:focus {
    border-color: #9dd87b !important;
    box-shadow: 0 0 0 3px rgba(101, 184, 47, .12) !important;
    outline: 0 !important;
}

body.frontend-body .checkout-form-simple input.checkout-order-qty-input {
    width: calc((var(--checkout-qty-digits, 1) * 1ch) + 42px) !important;
    min-width: 44px !important;
    max-width: 150px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
}

body.frontend-body .checkout-payment-logo-grid {
    gap: 10px;
}

body.frontend-body .checkout-payment-logo-card {
    justify-content: flex-start;
    flex: 0 1 214px;
    width: 214px;
    min-height: 68px;
    height: auto;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid #e0e6ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
}

body.frontend-body .checkout-payment-logo-card:hover,
body.frontend-body .checkout-payment-logo-card.is-selected {
    border-color: #65b82f;
    box-shadow: 0 0 0 3px rgba(101, 184, 47, .14), 0 10px 22px rgba(15, 23, 42, .05);
}

body.frontend-body .checkout-payment-logo-card.is-selected::after {
    top: 9px;
    right: 9px;
    width: 16px;
    height: 16px;
    background: #65b82f;
    color: #ffffff;
    content: "\f00c";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 6 Free";
    font-size: 9px;
    font-weight: 900;
}

body.frontend-body .payment-logo-box {
    flex: 0 0 auto;
    width: 76px;
    height: 42px;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    background: #f8fafc;
    padding: 6px;
}

body.frontend-body .payment-logo-box img {
    max-width: 64px;
    max-height: 26px;
}

body.frontend-body .checkout-payment-method-copy {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-right: 14px;
    text-align: left;
}

body.frontend-body .checkout-payment-method-copy strong {
    display: block;
    color: #111827;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.frontend-body .checkout-payment-method-copy small,
body.frontend-body .checkout-payment-logo-card .checkout-payment-method-copy small {
    display: block !important;
    color: #667085;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

body.frontend-body .checkout-coupon-panel-simple {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px dashed #dfe4ea;
    border-radius: 16px;
    background: #fbfcfe;
    box-shadow: none;
}

body.frontend-body .checkout-coupon-head {
    display: grid;
    gap: 2px;
}

body.frontend-body .checkout-coupon-head strong {
    color: #1f2937;
    font-size: 14px;
    font-weight: 800;
}

body.frontend-body .checkout-coupon-head span {
    color: #667085;
    font-size: 12px;
    line-height: 1.35;
}

body.frontend-body .checkout-coupon-simple-row {
    grid-template-columns: minmax(0, 1fr) 118px;
    border-color: #dfe4ea;
    border-radius: 12px;
}

body.frontend-body .checkout-coupon-simple-row input {
    height: 44px;
    padding: 0 13px;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: uppercase;
}

body.frontend-body .checkout-coupon-simple-row input::placeholder {
    color: #98a2b3;
    letter-spacing: 0;
    text-transform: none;
}

body.frontend-body .checkout-coupon-simple-row .coupon-apply-button {
    height: 44px;
    background: #667085;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: none;
}

body.frontend-body .checkout-coupon-simple-row .coupon-apply-button:hover {
    background: #475467;
}

body.frontend-body .checkout-total-summary-simple {
    gap: 10px;
    padding: 16px 18px;
    border: 1px solid #dff3da;
    border-radius: 18px;
    background: linear-gradient(135deg, #f7fff3, #ffffff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .04);
}

body.frontend-body .checkout-total-summary-simple span {
    color: #667085;
    font-size: 14px;
    font-weight: 650;
}

body.frontend-body .checkout-total-summary-simple strong {
    color: #111827;
    font-size: 15px;
    font-weight: 800;
}

body.frontend-body .checkout-total-summary-simple .checkout-grand-total {
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px dashed #cfe9c7;
}

body.frontend-body .checkout-total-summary-simple .checkout-grand-total span,
body.frontend-body .checkout-total-summary-simple .checkout-grand-total strong {
    color: #111827;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: .02em;
}

body.frontend-body .checkout-form-simple .checkout-submit-button {
    min-height: 54px;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #6fc936, #45a922);
    font-size: 15px;
    letter-spacing: .05em;
    box-shadow: 0 12px 22px rgba(69, 169, 34, .22);
}

body.frontend-body .checkout-form-simple .checkout-submit-button:hover {
    background: linear-gradient(135deg, #62bd2f, #3f9e1f);
}

body.frontend-body .checkout-security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: -3px 0 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
}

body.frontend-body .checkout-security-note i {
    color: #65b82f;
}

@media (max-width: 768px) {
    body.frontend-body .checkout-page-simple {
        width: 100%;
        margin-bottom: 34px;
    }

    body.frontend-body .checkout-back-link {
        margin: 8px 0 10px 16px;
        box-shadow: none;
    }

    body.frontend-body .checkout-modern-hero {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 0 16px 13px;
        padding: 14px;
        border-radius: 16px;
    }

    body.frontend-body .checkout-modern-hero h1 {
        font-size: 21px;
    }

    body.frontend-body .checkout-modern-hero p:not(.checkout-modern-eyebrow) {
        font-size: 13px;
    }

    body.frontend-body .checkout-modern-steps {
        justify-content: flex-start;
        max-width: none;
        gap: 6px;
    }

    body.frontend-body .checkout-modern-steps span {
        min-height: 28px;
        padding: 5px 8px;
        font-size: 11px;
    }

    body.frontend-body .checkout-form-simple {
        gap: 12px;
    }

    body.frontend-body .checkout-panel {
        margin: 0 16px;
        padding: 14px;
        border-radius: 16px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
    }

    body.frontend-body .checkout-section-icon {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        font-size: 13px;
    }

    body.frontend-body .checkout-section-head h1,
    body.frontend-body .checkout-section-head h2 {
        font-size: 17px;
    }

    body.frontend-body .checkout-order-item {
        grid-template-columns: 82px 1fr;
        gap: 11px;
        padding: 8px;
    }

    body.frontend-body .checkout-order-thumb {
        width: 82px;
        height: 66px;
    }

    body.frontend-body .checkout-order-info strong {
        font-size: 15px;
    }

    body.frontend-body .checkout-form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.frontend-body .checkout-payment-logo-card {
        flex: 1 1 100%;
        width: 100%;
        min-height: 64px;
    }

    body.frontend-body .checkout-coupon-panel-simple {
        grid-template-columns: 1fr;
        gap: 9px;
        margin: 0 16px;
        padding: 13px 14px;
    }

    body.frontend-body .checkout-coupon-head {
        grid-template-columns: 1fr;
    }

    body.frontend-body .checkout-coupon-simple-row {
        grid-template-columns: minmax(0, 1fr) 108px !important;
    }

    body.frontend-body .checkout-total-summary-simple {
        margin: 0 16px;
        padding: 14px;
        border-radius: 16px;
    }

    body.frontend-body .checkout-form-simple .checkout-submit-button {
        width: calc(100% - 32px);
        min-height: 54px;
        margin: 0 16px;
        border-radius: 16px !important;
        font-size: 14px;
    }

    body.frontend-body .checkout-security-note {
        margin: -2px 18px 0;
        font-size: 11.5px;
    }
}

@media (max-width: 380px) {
    body.frontend-body .checkout-modern-steps span {
        font-size: 10.5px;
        padding-inline: 7px;
    }

    body.frontend-body .checkout-coupon-simple-row {
        grid-template-columns: minmax(0, 1fr) 96px !important;
    }

    body.frontend-body .checkout-coupon-simple-row input,
    body.frontend-body .checkout-coupon-simple-row .coupon-apply-button {
        height: 42px;
        font-size: 12px;
    }
}

/* Checkout header & payment logo grid finishing - fitur checkout tetap sama */
body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean {
    display: block;
    margin-bottom: 13px;
    padding: 15px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(240, 253, 244, .92), rgba(255, 255, 255, .98));
}

body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean .checkout-modern-eyebrow {
    margin-bottom: 5px;
    font-size: 11.5px;
    letter-spacing: .08em;
}

body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean h1 {
    font-size: 23px;
}

body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean p:not(.checkout-modern-eyebrow) {
    max-width: 520px;
    margin-top: 6px;
}

body.frontend-body .checkout-payment-logo-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

body.frontend-body .checkout-payment-logo-card {
    justify-content: center;
    flex: 0 0 108px;
    width: 108px;
    min-height: 60px;
    height: 60px;
    gap: 0;
    padding: 8px 12px;
    border: 1px solid #dfe4ea;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: none;
}

body.frontend-body .checkout-payment-logo-card:hover,
body.frontend-body .checkout-payment-logo-card.is-selected {
    border-color: #65b82f;
    background: #fbfff9;
    box-shadow: 0 0 0 3px rgba(101, 184, 47, .12);
}

body.frontend-body .checkout-payment-logo-card.is-selected::after {
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;
    font-size: 8px;
}

body.frontend-body .payment-logo-box {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

body.frontend-body .payment-logo-box img {
    max-width: 78px;
    max-height: 32px;
}

body.frontend-body .payment-logo-box i {
    color: #1f2937;
    font-size: 24px;
}

body.frontend-body .checkout-payment-method-copy,
body.frontend-body .checkout-payment-method-copy strong,
body.frontend-body .checkout-payment-method-copy small,
body.frontend-body .checkout-payment-logo-card .checkout-payment-method-copy small {
    display: none !important;
}

@media (max-width: 768px) {
    body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean {
        margin: 0 16px 13px;
        padding: 14px;
        border-radius: 16px;
    }

    body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean h1 {
        font-size: 21px;
    }

    body.frontend-body .checkout-payment-logo-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    body.frontend-body .checkout-payment-logo-card {
        width: 100%;
        min-height: 56px;
        height: 56px;
        padding: 7px 9px;
    }

    body.frontend-body .payment-logo-box img {
        max-width: 72px;
        max-height: 28px;
    }
}

@media (max-width: 380px) {
    body.frontend-body .checkout-payment-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Checkout payment logo compact sizing - lebih siap untuk banyak metode pembayaran */
body.frontend-body .checkout-payment-logo-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

body.frontend-body .checkout-payment-logo-card {
    flex: 0 0 94px;
    width: 94px;
    min-height: 52px;
    height: 52px;
    padding: 6px 8px;
    border-radius: 12px;
}

body.frontend-body .checkout-payment-logo-card.is-selected::after {
    top: 5px;
    right: 5px;
    width: 14px;
    height: 14px;
    font-size: 7px;
}

body.frontend-body .payment-logo-box img {
    max-width: 64px;
    max-height: 24px;
}

body.frontend-body .payment-logo-box i {
    font-size: 22px;
}

@media (max-width: 768px) {
    body.frontend-body .checkout-payment-logo-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    body.frontend-body .checkout-payment-logo-card {
        width: 100%;
        min-height: 50px;
        height: 50px;
        padding: 6px 7px;
        border-radius: 12px;
    }

    body.frontend-body .checkout-payment-logo-card.is-selected::after {
        top: 4px;
        right: 4px;
        width: 13px;
        height: 13px;
        font-size: 7px;
    }

    body.frontend-body .payment-logo-box img {
        max-width: 58px;
        max-height: 22px;
    }

    body.frontend-body .payment-logo-box i {
        font-size: 20px;
    }
}

@media (max-width: 420px) {
    body.frontend-body .checkout-payment-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 360px) {
    body.frontend-body .checkout-payment-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.frontend-body .checkout-payment-logo-card {
        min-height: 48px;
        height: 48px;
    }

    body.frontend-body .payment-logo-box img {
        max-width: 54px;
        max-height: 20px;
    }
}

/* Checkout payment area compact - lebih padat dan siap banyak metode pembayaran */
body.frontend-body .checkout-payment-panel-compact {
    padding-top: 12px;
    padding-bottom: 14px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-section-head {
    margin-bottom: 10px;
    padding-bottom: 10px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-section-title {
    gap: 8px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 13px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-section-head h2 {
    font-size: 17px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-section-head > span {
    font-size: 11px;
    font-weight: 600;
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 84px);
    justify-content: flex-start;
    gap: 8px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card {
    flex: none;
    width: 84px;
    min-height: 46px;
    height: 46px;
    padding: 5px 6px;
    border-radius: 10px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card.is-selected::after {
    top: 3px;
    right: 3px;
    width: 12px;
    height: 12px;
    font-size: 6px;
}

body.frontend-body .checkout-payment-panel-compact .payment-logo-box img {
    max-width: 56px;
    max-height: 20px;
}

body.frontend-body .checkout-payment-panel-compact .payment-logo-box i {
    font-size: 18px;
}

@media (max-width: 768px) {
    body.frontend-body .checkout-payment-panel-compact {
        padding: 12px 14px 13px;
    }

    body.frontend-body .checkout-payment-panel-compact .checkout-section-head-modern {
        align-items: flex-start;
    }

    body.frontend-body .checkout-payment-panel-compact .checkout-section-head > span {
        font-size: 10.5px;
        line-height: 1.35;
        text-align: right;
    }

    body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 7px;
    }

    body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card {
        width: 100%;
        min-height: 44px;
        height: 44px;
        padding: 5px 6px;
        border-radius: 10px;
    }

    body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card.is-selected::after {
        top: 3px;
        right: 3px;
        width: 11px;
        height: 11px;
        font-size: 6px;
    }

    body.frontend-body .checkout-payment-panel-compact .payment-logo-box img {
        max-width: 50px;
        max-height: 18px;
    }

    body.frontend-body .checkout-payment-panel-compact .payment-logo-box i {
        font-size: 17px;
    }
}

@media (max-width: 370px) {
    body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 300px) {
    body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Checkout payment logo balance - logo lebih besar & jelas, tile tetap rapi */
body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 92px);
    justify-content: flex-start;
    gap: 8px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card {
    flex: none;
    width: 92px;
    min-height: 50px;
    height: 50px;
    padding: 4px 6px;
    border-radius: 10px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card.is-selected::after {
    top: 4px;
    right: 4px;
    width: 12px;
    height: 12px;
    font-size: 6px;
}

body.frontend-body .checkout-payment-panel-compact .payment-logo-box img {
    max-width: 72px;
    max-height: 28px;
}

body.frontend-body .checkout-payment-panel-compact .payment-logo-box i {
    font-size: 20px;
}

@media (max-width: 768px) {
    

    body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card {
        width: 100%;
        min-height: 50px;
        height: 50px;
        padding: 4px 5px;
        border-radius: 10px;
    }

    

    body.frontend-body .checkout-payment-panel-compact .payment-logo-box img {
        max-width: 66px;
        max-height: 24px;
    }

    body.frontend-body .checkout-payment-panel-compact .payment-logo-box i {
        font-size: 18px;
    }
}

@media (max-width: 320px) {
    body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Checkout overall finishing - seragamkan Ringkasan, Data, Pembayaran, Kupon, Total */
body.frontend-body .checkout-page-simple {
    width: min(760px, calc(100% - 30px));
}

body.frontend-body .checkout-form-simple {
    gap: 12px;
}

body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean,
body.frontend-body .checkout-panel,
body.frontend-body .checkout-coupon-panel-simple,
body.frontend-body .checkout-total-summary-simple {
    border: 1px solid #e4e9f0;
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .045);
}

body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean {
    margin-bottom: 12px;
    padding: 15px 18px;
    background:
        radial-gradient(circle at top left, rgba(101, 184, 47, .12), transparent 36%),
        linear-gradient(135deg, #f7fff3, #ffffff);
}

body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean .checkout-modern-eyebrow {
    margin: 0 0 4px;
    color: #42a820;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
}

body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean h1 {
    margin: 0;
    font-size: 23px;
    line-height: 1.15;
    letter-spacing: -.025em;
}

body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean p:not(.checkout-modern-eyebrow) {
    margin-top: 6px;
    color: #667085;
    font-size: 13px;
    line-height: 1.45;
}

body.frontend-body .checkout-panel {
    padding: 15px 17px 16px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .94)),
        #ffffff;
}

body.frontend-body .checkout-section-head {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf1f5;
}

body.frontend-body .checkout-section-title {
    gap: 9px;
}

body.frontend-body .checkout-section-icon {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: #eefdf0;
    color: #41a51f;
    font-size: 13px;
}

body.frontend-body .checkout-section-head h1,
body.frontend-body .checkout-section-head h2 {
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -.02em;
}

body.frontend-body .checkout-section-head > span {
    color: #667085;
    font-size: 12px;
    font-weight: 650;
}

body.frontend-body .checkout-order-item {
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding: 9px;
    border-color: #edf1f5;
    border-radius: 15px;
    background: #fbfcfe;
}

body.frontend-body .checkout-order-thumb {
    width: 88px;
    height: 68px;
    border-radius: 12px;
}

body.frontend-body .checkout-order-info strong {
    font-size: 15px;
    line-height: 1.2;
}

body.frontend-body .checkout-order-info span {
    font-size: 12.5px;
}

body.frontend-body .checkout-order-info b {
    font-size: 14px;
}

body.frontend-body .checkout-form-grid {
    gap: 12px 14px;
}

body.frontend-body .checkout-form-grid label,
body.frontend-body .checkout-coupon-group label {
    margin-bottom: 6px;
    font-size: 12.5px;
}

body.frontend-body .checkout-form-simple input[type="text"],
body.frontend-body .checkout-form-simple input[type="tel"],
body.frontend-body .checkout-form-simple input[type="email"],
body.frontend-body .checkout-page-simple .checkout-form-grid input#checkoutCustomerWhatsapp,
body.frontend-body .checkout-page-simple .checkout-form-grid input[name="customer_whatsapp"] {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    font-size: 13.5px !important;
}

body.frontend-body .checkout-payment-panel-compact {
    padding-top: 13px;
    padding-bottom: 14px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-section-head {
    margin-bottom: 10px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-grid {
    gap: 8px;
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card {
    width: 94px;
    min-height: 50px;
    height: 50px;
    border-color: #d8dee8;
    border-radius: 11px;
    background: #ffffff;
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card:hover,
body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card.is-selected {
    border-color: #39a7ff;
    background: #ffffff;
    box-shadow: 0 0 0 2px rgba(57, 167, 255, .12);
}

body.frontend-body .checkout-payment-panel-compact .checkout-payment-logo-card.is-selected::after {
    background: #65b82f;
}

body.frontend-body .checkout-coupon-panel-simple {
    grid-template-columns: 180px minmax(0, 1fr);
    margin: 0;
    padding: 13px 15px;
    border-style: solid;
    background: #fbfcfe;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .035);
}

body.frontend-body .checkout-coupon-head strong {
    font-size: 13px;
}

body.frontend-body .checkout-coupon-head span {
    font-size: 11.5px;
}

body.frontend-body .checkout-coupon-simple-row {
    grid-template-columns: minmax(0, 1fr) 108px;
    border-radius: 11px;
}

body.frontend-body .checkout-coupon-simple-row input,
body.frontend-body .checkout-coupon-simple-row .coupon-apply-button {
    height: 42px;
}

body.frontend-body .checkout-total-summary-simple {
    margin: 0;
    gap: 9px;
    padding: 15px 17px;
    background:
        radial-gradient(circle at top right, rgba(101, 184, 47, .12), transparent 40%),
        linear-gradient(135deg, #f7fff3, #ffffff);
}

body.frontend-body .checkout-total-summary-simple span {
    color: #667085;
    font-size: 13px;
    font-weight: 650;
}

body.frontend-body .checkout-total-summary-simple strong {
    color: #111827;
    font-size: 14px;
    font-weight: 850;
}

body.frontend-body .checkout-total-summary-simple .checkout-grand-total {
    margin-top: 1px;
    padding-top: 11px;
}

body.frontend-body .checkout-total-summary-simple .checkout-grand-total span,
body.frontend-body .checkout-total-summary-simple .checkout-grand-total strong {
    font-size: 17px;
    font-weight: 900;
}

body.frontend-body .checkout-form-simple .checkout-submit-button {
    min-height: 52px;
    border-radius: 15px !important;
    font-size: 14px;
    box-shadow: 0 12px 20px rgba(69, 169, 34, .20);
}

body.frontend-body .checkout-security-note {
    margin-top: -4px;
}

@media (max-width: 768px) {
    body.frontend-body .checkout-page-simple {
        width: 100%;
        margin-bottom: 30px;
    }

    body.frontend-body .checkout-back-link {
        margin: 7px 0 9px 16px;
    }

    body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean {
        margin: 0 16px 12px;
        padding: 13px 14px;
        border-radius: 16px;
    }

    body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean h1 {
        font-size: 20px;
    }

    body.frontend-body .checkout-modern-hero.checkout-modern-hero-clean p:not(.checkout-modern-eyebrow) {
        font-size: 12.5px;
    }

    body.frontend-body .checkout-form-simple {
        gap: 11px;
    }

    body.frontend-body .checkout-panel {
        margin: 0 16px;
        padding: 13px 14px;
        border-radius: 16px;
    }

    body.frontend-body .checkout-section-head {
        margin-bottom: 10px;
        padding-bottom: 9px;
    }

    body.frontend-body .checkout-section-icon {
        width: 29px;
        height: 29px;
        border-radius: 9px;
        font-size: 12px;
    }

    

    body.frontend-body .checkout-section-head > span {
        font-size: 11px;
    }

    body.frontend-body .checkout-order-item {
        grid-template-columns: 78px 1fr;
        gap: 10px;
        padding: 8px;
        border-radius: 14px;
    }

    body.frontend-body .checkout-order-thumb {
        width: 78px;
        height: 62px;
        border-radius: 11px;
    }

    body.frontend-body .checkout-order-info strong {
        font-size: 14px;
    }

    body.frontend-body .checkout-form-grid {
        gap: 11px;
    }

    body.frontend-body .checkout-form-simple input[type="text"],
    body.frontend-body .checkout-form-simple input[type="tel"],
    body.frontend-body .checkout-form-simple input[type="email"],
    body.frontend-body .checkout-page-simple .checkout-form-grid input#checkoutCustomerWhatsapp,
    body.frontend-body .checkout-page-simple .checkout-form-grid input[name="customer_whatsapp"] {
        min-height: 43px !important;
        padding: 9px 11px !important;
        font-size: 13.5px !important;
    }

    body.frontend-body .checkout-payment-panel-compact .checkout-section-head-modern {
        align-items: center;
        gap: 10px;
    }

    body.frontend-body .checkout-payment-panel-compact .checkout-section-head > span {
        max-width: 105px;
        font-size: 10.5px;
        text-align: right;
    }

    body.frontend-body .checkout-coupon-panel-simple {
        grid-template-columns: 1fr;
        gap: 8px;
        margin: 0 16px;
        padding: 12px 13px;
        border-radius: 16px;
    }

    body.frontend-body .checkout-coupon-simple-row {
        grid-template-columns: minmax(0, 1fr) 98px !important;
    }

    body.frontend-body .checkout-coupon-simple-row input,
    body.frontend-body .checkout-coupon-simple-row .coupon-apply-button {
        height: 41px;
    }

    body.frontend-body .checkout-total-summary-simple {
        margin: 0 16px;
        padding: 13px 14px;
        border-radius: 16px;
    }

    body.frontend-body .checkout-total-summary-simple .checkout-grand-total span,
    body.frontend-body .checkout-total-summary-simple .checkout-grand-total strong {
        font-size: 16px;
    }

    body.frontend-body .checkout-form-simple .checkout-submit-button {
        width: calc(100% - 32px);
        min-height: 51px;
        margin: 0 16px;
        border-radius: 15px !important;
    }
}

@media (max-width: 380px) {
    body.frontend-body .checkout-coupon-simple-row {
        grid-template-columns: minmax(0, 1fr) 88px !important;
    }

    body.frontend-body .checkout-coupon-simple-row input,
    body.frontend-body .checkout-coupon-simple-row .coupon-apply-button {
        height: 40px;
        font-size: 12px;
    }
}


/* Article search suggestions fallback/finishing */
body.frontend-body .article-search-actions {
    gap: 9px;
}

body.frontend-body .article-search-suggestions {
    width: min(100%, 720px);
    margin: 0 auto;
    gap: 7px;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.35;
}

body.frontend-body .article-search-suggestions span {
    color: #4b5563;
    font-size: 12px;
    font-weight: 800;
}

body.frontend-body .article-search-suggestions a {
    min-height: 28px;
    padding: 5px 10px;
    border-color: #dff3da;
    background: #f7fff3;
    color: #2f7d1b;
    font-size: 12px;
    font-weight: 750;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .035);
}

body.frontend-body .article-search-suggestions a:hover,
body.frontend-body .article-search-suggestions a:focus-visible {
    border-color: #9dd87b;
    background: #eefce8;
    color: #226315;
    outline: 0;
}

@media (max-width: 768px) {
    body.frontend-body .article-search-suggestions {
        justify-content: flex-start;
        gap: 6px;
        padding: 0 2px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body.frontend-body .article-search-suggestions::-webkit-scrollbar {
        display: none;
    }

    body.frontend-body .article-search-suggestions span,
    body.frontend-body .article-search-suggestions a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    body.frontend-body .article-search-suggestions a {
        min-height: 27px;
        padding: 5px 9px;
        font-size: 11.5px;
    }
}


/* Media Gallery power-up: safe cleanup, missing audit, action focus */
.media-focus-card {
    border-color: #dff3da;
    background: linear-gradient(135deg, #f7fff3, #ffffff);
}

.media-focus-card.is-missing-audit {
    border-color: #fee2e2;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.media-focus-card strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.media-clean-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #ffffff;
    color: #475569;
    font-size: 13px;
    font-weight: 800;
}

.media-bulk-bar.is-missing {
    border-color: #fee2e2;
    background: linear-gradient(135deg, #fff7ed, #ffffff);
}

.media-mini-stat.is-unused small {
    color: #15803d;
}

.media-missing-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 7px 0 2px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
}

.media-missing-state.is-cleanable {
    border: 1px solid #d9f99d;
    background: #f7fee7;
    color: #3f6212;
}

.media-missing-state.is-referenced {
    border: 1px solid #fecaca;
    background: #fff1f2;
    color: #991b1b;
}

.media-card.is-missing-cleanable {
    border-color: #d9f99d;
}

.media-card.is-missing-referenced {
    border-color: #fecaca;
}

.media-card.is-missing-cleanable .media-thumb-empty {
    background: #f7fee7;
    color: #4d7c0f;
}

.media-card.is-missing-referenced .media-thumb-empty {
    background: #fff1f2;
    color: #991b1b;
}

.media-location-list span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.media-location-list a {
    flex: 0 0 auto;
    color: #2563eb;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.media-location-list a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .media-clean-summary {
        width: 100%;
        justify-content: center;
    }

    .media-location-list span {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}


/* Galeri Media - Audit view, filter dimensi, dan rekomendasi optimasi */
.media-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #f8fafc;
}

.media-view-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.media-view-toggle a.is-active {
    color: #0f172a;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.media-weight-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .01em;
    border: 1px solid transparent;
}

.media-weight-badge.is-info {
    color: #075985;
    background: #e0f2fe;
    border-color: #bae6fd;
}

.media-weight-badge.is-warning {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.media-weight-badge.is-danger {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

.media-recommendation-list {
    display: grid;
    gap: 6px;
    margin-top: 8px;
}

.media-recommendation-pill {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    padding: 6px 9px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    border: 1px solid #dbe3ef;
    background: #f8fafc;
    color: #334155;
}

.media-recommendation-pill i {
    margin-top: 1px;
    flex: 0 0 auto;
}

.media-recommendation-pill.is-success {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0;
}

.media-recommendation-pill.is-info {
    color: #075985;
    background: #e0f2fe;
    border-color: #bae6fd;
}

.media-recommendation-pill.is-warning {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.media-recommendation-pill.is-danger {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca;
}

.media-recommendation-pill.is-muted {
    color: #475569;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.media-card .media-weight-badge {
    margin-top: -2px;
}

.media-card-body > .media-weight-badge {
    margin-bottom: 2px;
}

.media-list-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 14px 35px rgba(15, 23, 42, 0.06);
}

.media-list-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.media-list-table th,
.media-list-table td {
    padding: 13px 12px;
    vertical-align: top;
    border-bottom: 1px solid #edf2f7;
    text-align: left;
}

.media-list-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #475569;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.media-list-table tbody tr:hover {
    background: #f8fafc;
}

.media-list-table tbody tr:last-child td {
    border-bottom: 0;
}

.media-list-select-col {
    width: 58px;
    text-align: center !important;
}

.media-list-select-col input {
    width: 18px;
    height: 18px;
}

.media-list-file {
    min-width: 260px;
    max-width: 320px;
}

.media-list-file strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #0f172a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-list-file code {
    display: block;
    margin-top: 5px;
    max-width: 100%;
    overflow: hidden;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11.5px;
}

.media-list-recommendation {
    min-width: 220px;
    max-width: 280px;
}

.media-list-recommendation .media-recommendation-pill {
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}

.media-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 190px;
}

.media-list-dash {
    color: #94a3b8;
    font-size: 12px;
}

.media-select-locked {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 76px;
    padding: 5px 8px;
    border-radius: 999px;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.media-select-locked i {
    font-size: 10px;
}

.media-select-none-note {
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.media-location-details--list summary {
    cursor: pointer;
    color: #2563eb;
    font-weight: 800;
}

.media-detail-recommendations {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: #f8fafc;
}

.media-detail-recommendations > strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #0f172a;
    font-size: 13px;
}

.media-detail-list .media-weight-badge {
    margin-left: 7px;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .media-toolbar-form {
        align-items: stretch;
    }

    .media-view-toggle {
        width: 100%;
        justify-content: stretch;
        border-radius: 14px;
    }

    .media-view-toggle a {
        flex: 1;
        justify-content: center;
        border-radius: 12px;
    }

    .media-bulk-actions--simple {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .media-bulk-actions--simple .btn,
    .media-bulk-actions--simple .media-select-all,
    .media-bulk-actions--simple .media-clean-summary {
        width: 100%;
        justify-content: center;
    }

    .media-list-table-wrap {
        border-radius: 14px;
    }

    .media-list-table {
        min-width: 980px;
        font-size: 12.5px;
    }

    .media-list-table th,
    .media-list-table td {
        padding: 10px 9px;
    }

    .media-recommendation-pill {
        font-size: 11.5px;
    }
}

@media (max-width: 480px) {
    .media-view-toggle a {
        padding: 7px 9px;
        font-size: 12px;
    }

    .media-card-body > .media-weight-badge {
        margin-top: 2px;
    }

    .media-recommendation-pill {
        width: 100%;
    }
}


/* Revisi mobile Galeri Media: naikkan header dan hilangkan marker summary yang tampil sebagai kotak kosong */
.media-advanced-panel summary::marker,
.media-settings-accordion summary::marker {
    content: "";
    font-size: 0;
}

.media-advanced-panel summary::-webkit-details-marker,
.media-settings-accordion summary::-webkit-details-marker {
    display: none;
}

.media-advanced-panel summary::after,
.media-settings-accordion summary::after {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    transform-origin: center;
    font-size: 0;
    line-height: 0;
    transition: transform .16s ease;
}

.media-advanced-panel[open] summary::after,
.media-settings-accordion[open] summary::after {
    transform: rotate(-135deg);
}

@media (max-width: 680px) {
    .media-gallery-header--simple {
        margin-top: -8px;
        gap: 10px;
    }

    .media-gallery-header--simple .admin-eyebrow {
        margin-bottom: 4px;
        color: #94a3b8;
        opacity: 1;
    }

    .media-gallery-header--simple h1 {
        margin-top: 0;
        margin-bottom: 8px;
    }

    .media-gallery-header--simple p {
        margin-top: 0;
    }

    .media-settings-accordion summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 5px 10px;
        flex-direction: initial;
    }

    .media-settings-accordion summary > span,
    .media-settings-accordion summary > small {
        min-width: 0;
        grid-column: 1;
    }

    .media-settings-accordion summary::after {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
    }

    .media-advanced-panel summary {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        justify-content: initial;
    }

    .media-advanced-panel summary > i {
        grid-column: 1;
    }

    .media-advanced-panel summary::after {
        grid-column: 3;
        justify-self: end;
    }
}

@media (max-width: 480px) {
    .media-gallery-header--simple {
        margin-top: -10px;
    }
}


/* Revisi desktop Galeri Media: rapikan jarak atas header halaman */
@media (min-width: 681px) {
    .media-gallery-header--simple {
        margin-top: -14px;
        gap: 14px;
    }

    .media-gallery-header--simple .admin-eyebrow {
        margin-bottom: 5px;
        color: #94a3b8;
        opacity: 1;
        text-shadow: none;
    }

    .media-gallery-header--simple h1 {
        margin-top: 0;
        margin-bottom: 8px;
    }

    .media-gallery-header--simple p {
        margin-top: 0;
    }
}

/* Dashboard operasional harian */
.admin-dashboard-updated {
    display: inline-flex;
    margin-top: 10px;
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 700;
}

.admin-dashboard-section {
    margin-bottom: 20px;
}

.admin-stats-grid.is-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-stats-grid.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-stat-card.admin-stat-link {
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.admin-stat-card.admin-stat-link:hover {
    border-color: #bfdbfe;
    box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12);
    transform: translateY(-2px);
}

.admin-stat-card em {
    color: #667085;
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
}

@media (max-width: 1180px) {
    .admin-stats-grid.is-four,
    .admin-stats-grid.is-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .admin-stats-grid.is-four,
    .admin-stats-grid.is-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-stats-grid.is-four,
    .admin-stats-grid.is-three {
        grid-template-columns: 1fr;
    }

    .admin-stat-card em {
        font-size: 12px;
    }
}

/* Dashboard mobile accordion: ringkasan tetap ringkas di layar HP */
.admin-dashboard-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: default;
}

.admin-dashboard-toggle-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: #eef4ff;
    color: #2563eb;
    font-size: 18px;
}

.admin-dashboard-toggle-main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.admin-dashboard-toggle-main > span {
    color: #111827;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.2;
}

.admin-dashboard-toggle-main small {
    color: #667085;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

.admin-dashboard-title-mobile {
    display: none;
}


.admin-dashboard-toggle-meta {
    margin-left: auto;
    color: #667085;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
}

.admin-dashboard-chevron {
    display: none;
    color: #2563eb;
    font-size: 13px;
    transition: transform .18s ease;
}

.admin-dashboard-accordion-body[hidden] {
    display: none !important;
}

@media (min-width: 641px) {
    .admin-dashboard-toggle-icon {
        display: none;
    }

    .admin-dashboard-toggle-meta {
        display: none;
    }
}

@media (max-width: 640px) {
    .admin-dashboard-section {
        margin-bottom: 12px;
    }

    .admin-dashboard-toggle {
        position: relative;
        margin-bottom: 0;
        padding: 14px 14px;
        border: 1px solid #e8edf5;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.055);
        cursor: pointer;
    }

    .admin-dashboard-toggle-main > span {
        font-size: 18px;
    }

    .admin-dashboard-toggle-main small {
        display: none;
    }


    .admin-dashboard-title-desktop {
        display: none;
    }

    .admin-dashboard-title-mobile {
        display: inline;
    }

    .admin-dashboard-toggle-main {
        flex: 1 1 auto;
    }
    .admin-dashboard-toggle-meta {
        max-width: 42%;
        overflow: hidden;
        color: #667085;
        text-overflow: ellipsis;
        font-size: 12px;
        line-height: 1.35;
    }

    .admin-dashboard-chevron {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .admin-dashboard-accordion.is-open .admin-dashboard-chevron {
        transform: rotate(180deg);
    }

    .admin-dashboard-accordion.is-open .admin-dashboard-accordion-body {
        margin-top: 10px;
    }

    .admin-dashboard-card.admin-dashboard-section {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .admin-stats-grid.is-four,
    .admin-stats-grid.is-three,
    .admin-quick-grid {
        gap: 10px;
        margin-bottom: 0;
    }

    .admin-stat-card {
        min-height: 0;
        padding: 14px 16px;
        border-radius: 16px;
    }

    .admin-stat-card span,
    .admin-quick-link i {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        font-size: 16px;
    }

    .admin-stat-card strong {
        font-size: 28px;
    }

    .admin-quick-link {
        padding: 14px 16px;
        border-radius: 16px;
    }
}

/* Frame otomatis gambar produk v1 */
.product-main-image-admin-box {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.product-frame-admin-box {
    max-width: 920px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}

.product-frame-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.product-frame-toggle,
.product-frame-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1f2937;
    cursor: pointer;
}

.product-frame-toggle {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #ffffff;
    font-weight: 600;
}

.product-frame-settings {
    margin-top: 14px;
}

.product-frame-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(320px, 1.1fr);
    gap: 16px;
    align-items: start;
}

.product-frame-controls select,
.product-frame-controls input[type="range"] {
    width: 100%;
    max-width: 420px;
}

.product-frame-controls select {
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
}

.compact-form-group {
    margin-bottom: 12px;
}

.product-frame-preview-wrap {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.product-frame-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.product-frame-preview-canvas-wrap {
    position: relative;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #eff6ff;
}

.product-frame-preview-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 744;
}

.product-frame-preview-empty[hidden] {
    display: none !important;
}

.product-frame-preview-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    color: #64748b;
    text-align: center;
    background: rgba(248, 250, 252, 0.88);
}


.product-frame-watermark-summary {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fbff;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.45;
}

.product-frame-watermark-summary > strong {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
}

.product-frame-watermark-summary.is-muted {
    border-color: #e5e7eb;
    background: #f8fafc;
    color: #64748b;
}

.product-frame-watermark-summary.is-active {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.product-frame-watermark-summary-text {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 9px;
}

.product-frame-watermark-summary-text span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.product-frame-watermark-summary-text small {
    flex: 1 0 100%;
    color: #64748b;
    line-height: 1.4;
}

.product-frame-watermark-muted {
    color: #6b7280;
    font-weight: 700;
}

.product-frame-original-note {
    display: block;
    width: fit-content;
    max-width: 760px;
    margin: 0 0 10px;
    padding: 8px 10px;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    background: #f0fdf4;
    color: #166534;
    font-size: 13px;
    line-height: 1.45;
}

.product-frame-helper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 0 0 12px;
    padding: 9px 11px;
    border-radius: 12px;
    border: 1px solid #dbeafe;
    background: #ffffff;
    color: #1f2937;
    font-size: 13px;
    line-height: 1.45;
}

.product-frame-helper strong {
    margin: 0;
}

.product-frame-helper b {
    font-weight: 700;
}

.product-frame-helper-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.product-frame-helper-info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.product-frame-helper-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.product-frame-preview-head > div {
    min-width: 0;
}

.product-frame-preview-source-note {
    max-width: 360px;
    line-height: 1.35;
}

.product-frame-preview-button {
    white-space: nowrap;
    min-width: 128px;
}

@media (max-width: 760px) {
    .product-frame-header {
        flex-direction: column;
    }

    .product-frame-toggle {
        width: 100%;
        justify-content: center;
        border-radius: 12px;
    }

    .product-frame-grid {
        grid-template-columns: 1fr;
    }

    .product-frame-preview-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Template Frame Produk v2 */
.product-frame-template-header {
    margin-bottom: 18px;
}

.product-frame-template-card {
    margin-bottom: 18px;
}

.product-frame-template-form-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) minmax(260px, 0.8fr);
    gap: 18px;
    align-items: start;
}

.product-frame-template-form input[type="text"],
.product-frame-template-form input[type="color"],
.product-frame-template-form select,
.product-frame-template-form textarea,
.product-frame-template-card input[type="text"],
.product-frame-template-card input[type="color"],
.product-frame-template-card select,
.product-frame-template-card textarea {
    width: 100%;
    max-width: 520px;
    padding: 10px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
}

.product-frame-template-card textarea {
    resize: vertical;
}

.product-frame-template-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-top: 12px;
}

.product-frame-template-preset-box {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}

.product-frame-template-preset-box input[type="range"] {
    width: 100%;
}

.product-frame-upload-preview-box {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.product-frame-upload-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 170px;
    margin-top: 10px;
    overflow: hidden;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    text-align: center;
}

.product-frame-upload-preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 744;
    object-fit: contain;
}

.product-frame-upload-preview img[hidden],
.product-frame-upload-preview [hidden] {
    display: none !important;
}

.product-frame-upload-preview span {
    display: inline-flex;
    max-width: 280px;
    padding: 0 12px;
    color: #64748b;
    line-height: 1.45;
}

.product-frame-safe-note {
    margin-top: 8px;
    color: #64748b;
    font-size: 12px;
}

.product-frame-template-list {
    display: grid;
    gap: 14px;
}

.product-frame-template-item {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    background: #ffffff;
}

.product-frame-template-preview {
    overflow: hidden;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #eff6ff;
}

.product-frame-template-preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 744;
    object-fit: cover;
}

.product-frame-template-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.product-frame-template-title-row h3 {
    margin: 0 0 4px;
    font-size: 18px;
}

.product-frame-template-title-row code {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 12px;
}

.product-frame-template-badges,
.product-frame-template-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.product-frame-template-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
    color: #475569;
    font-size: 13px;
}

.product-frame-template-notes {
    margin: 10px 0 0;
    color: #475569;
    font-size: 13px;
}

.product-frame-template-actions {
    margin-top: 12px;
}

.inline-form {
    display: inline-flex;
    margin: 0;
}

.btn-danger-light {
    color: #b91c1c !important;
    border-color: #fecaca !important;
    background: #fff7f7 !important;
}

.product-frame-products-list {
    display: grid;
    gap: 12px;
}

.product-frame-product-item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #ffffff;
}

.product-frame-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 12px;
    text-align: center;
    aspect-ratio: 1200 / 744;
}

.product-frame-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-frame-product-item h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

@media (max-width: 980px) {
    .product-frame-template-form-grid {
        grid-template-columns: 1fr;
    }

    .product-frame-template-item {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .product-frame-template-title-row {
        flex-direction: column;
    }

    .product-frame-template-actions .btn,
    .product-frame-template-actions form,
    .product-frame-template-actions button {
        width: 100%;
        justify-content: center;
    }

    .product-frame-product-item {
        grid-template-columns: 1fr;
    }
}


.product-frame-watermark-box {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 18px;
    border-color: #dbeafe;
    background: #f8fbff;
}

.product-frame-watermark-box > strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.product-frame-watermark-box .form-note {
    max-width: 820px;
}

.product-frame-watermark-box label {
    font-size: 13px;
    line-height: 1.35;
}

.product-frame-watermark-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1.4fr) minmax(170px, .75fr) minmax(220px, 1fr) minmax(170px, .75fr);
    gap: 14px 16px;
    align-items: end;
    margin-top: 12px;
}

.product-frame-watermark-grid .compact-form-group {
    margin-bottom: 0;
}

.product-frame-watermark-grid input[type="text"],
.product-frame-watermark-grid select {
    width: 100%;
    max-width: none;
    min-height: 42px;
}

.product-frame-watermark-grid input[type="range"] {
    width: 100%;
}

.product-frame-check-inline {
    align-self: center;
    min-height: 42px;
    margin-top: 0;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
}

.product-frame-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.product-frame-color-row input[type="color"] {
    width: 58px;
    min-width: 58px;
    max-width: 58px;
    height: 42px;
    padding: 3px;
    border-radius: 10px;
}

.product-frame-color-row input[type="text"] {
    max-width: 150px;
}

@media (max-width: 1180px) {
    .product-frame-watermark-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .product-frame-watermark-box {
        padding: 14px;
    }

    .product-frame-watermark-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .product-frame-color-row {
        align-items: stretch;
    }

    .product-frame-color-row input[type="text"] {
        flex: 1 1 auto;
        max-width: none;
    }
}


/* Revisi Galeri Media: rapikan tabel setelah tombol Salin dihapus */
.media-list-table {
    min-width: 980px;
}

.media-list-table th,
.media-list-table td {
    padding-top: 11px;
    padding-bottom: 11px;
}

.media-list-table th:nth-child(8),
.media-list-table td:nth-child(8) {
    width: 108px;
    min-width: 108px;
}

.media-list-table th:nth-child(9),
.media-list-table td:nth-child(9) {
    width: 92px;
    min-width: 92px;
}

.media-list-actions {
    min-width: 0;
    width: max-content;
    gap: 0;
}

.media-list-actions .btn {
    white-space: nowrap;
}

@media (max-width: 760px) {
    .media-list-table {
        min-width: 850px;
    }

    .media-list-table th,
    .media-list-table td {
        padding: 9px 8px;
    }

    .media-list-file {
        min-width: 210px;
        max-width: 250px;
    }

    .media-list-recommendation {
        min-width: 190px;
        max-width: 220px;
    }

    .media-list-table th:nth-child(8),
    .media-list-table td:nth-child(8) {
        width: 96px;
        min-width: 96px;
    }

    .media-list-table th:nth-child(9),
    .media-list-table td:nth-child(9) {
        width: 82px;
        min-width: 82px;
    }

    .media-list-actions .btn {
        padding: 8px 13px;
        border-radius: 11px;
    }
}

@media (max-width: 480px) {
    .media-list-table {
        min-width: 800px;
    }

    .media-list-table th,
    .media-list-table td {
        padding: 8px 7px;
    }

    .media-list-select-col {
        width: 82px;
    }

    .media-select-locked {
        min-width: 68px;
        padding: 4px 7px;
        font-size: 10.5px;
    }

    .media-list-table th:nth-child(8),
    .media-list-table td:nth-child(8) {
        width: 88px;
        min-width: 88px;
    }

    .media-list-table th:nth-child(9),
    .media-list-table td:nth-child(9) {
        width: 76px;
        min-width: 76px;
    }

    .media-list-actions .btn {
        padding: 7px 11px;
        font-size: 12px;
    }
}

/* Admin - Product image output canvas settings */
.optimizer-module-card__fields--product {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.optimizer-module-card__note {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #eff6ff;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
}

.optimizer-module-card__note strong {
    color: #1e3a8a;
}

@media (max-width: 640px) {
    .optimizer-module-card__fields--product {
        grid-template-columns: 1fr;
    }

    .optimizer-module-card__note {
        border-radius: 12px;
        font-size: 12.5px;
    }
}

/* Template Frame Produk: preview server watermark */
.product-frame-watermark-preview-box {
    margin-top: 18px;
    padding: 18px;
    border-color: #dbeafe;
    background: #f8fbff;
}

.product-frame-watermark-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.product-frame-watermark-preview-head > div {
    min-width: 0;
}

.product-frame-watermark-preview-head strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.product-frame-watermark-preview-grid {
    display: grid;
    grid-template-columns: minmax(240px, .85fr) minmax(320px, 1.35fr);
    gap: 16px;
    align-items: start;
}

.product-frame-watermark-preview-control {
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.product-frame-watermark-preview-control input[type="file"] {
    width: 100%;
    margin-top: 6px;
}

.form-note-inline {
    display: inline;
    font-weight: 500;
}

.product-frame-watermark-preview-message {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 13px;
    line-height: 1.45;
}

.product-frame-watermark-preview-message.is-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.product-frame-watermark-preview-message.is-error {
    border-color: #fecaca;
    background: #fff7f7;
    color: #b91c1c;
}

.product-frame-watermark-preview-result {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    overflow: hidden;
    border: 1px dashed #bfdbfe;
    border-radius: 16px;
    background: #ffffff;
    color: #64748b;
    text-align: center;
}

.product-frame-watermark-preview-result span {
    max-width: 280px;
    padding: 14px;
    line-height: 1.45;
}

.product-frame-watermark-preview-result img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 744;
    object-fit: contain;
}

.product-frame-watermark-preview-result img[hidden],
.product-frame-watermark-preview-result [hidden] {
    display: none !important;
}

@media (max-width: 920px) {
    .product-frame-watermark-preview-head {
        flex-direction: column;
    }

    .product-frame-watermark-preview-grid {
        grid-template-columns: 1fr;
    }

    .product-frame-watermark-preview-head .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .product-frame-watermark-preview-box {
        padding: 14px;
    }

    .product-frame-watermark-preview-result {
        min-height: 190px;
    }
}

/* Dashboard Info Stok Produk */
.admin-stock-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-stock-dashboard-head p {
    margin: 0;
    color: #475467;
    font-size: 14px;
    line-height: 1.5;
}

.admin-stock-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-stock-list-card,
.admin-stock-safe-box {
    border: 1px solid #e6ebf3;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.admin-stock-list-card {
    padding: 16px;
}

.admin-stock-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-stock-list-title h3 {
    margin: 0;
    color: #202938;
    font-size: 17px;
    line-height: 1.25;
}

.admin-stock-list-title span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fff7ed;
    color: #c2410c;
    font-size: 13px;
    font-weight: 900;
}

.admin-stock-list-card.is-empty-stock .admin-stock-list-title span {
    background: #fef2f2;
    color: #b91c1c;
}

.admin-stock-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-stock-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #f8fafc;
}

.admin-stock-list li > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.admin-stock-list strong,
.admin-stock-list span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-stock-list strong {
    color: #1f2937;
    font-size: 14px;
}

.admin-stock-list span,
.admin-stock-empty,
.admin-stock-more {
    color: #667085;
    font-size: 12px;
    line-height: 1.45;
}

.admin-stock-empty {
    margin: 0;
}

.admin-stock-more {
    display: block;
    margin-top: 10px;
}

.admin-stock-safe-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.admin-stock-safe-box i {
    margin-top: 2px;
    color: #16a34a;
    font-size: 18px;
}

.admin-stock-safe-box div {
    display: grid;
    gap: 4px;
}

.admin-stock-safe-box strong {
    color: #166534;
}

.admin-stock-safe-box span {
    color: #3f6f4f;
    font-size: 13px;
    line-height: 1.45;
}

.store-settings-card input[type="number"] {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #d1d5db;
    border-radius: 14px;
    background: #ffffff;
    color: #202938;
    font: inherit;
    outline: none;
}

.store-settings-stock-alert {
    margin-bottom: 18px;
}

.store-settings-stock-help {
    display: grid;
    gap: 5px;
    margin-top: 2px;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #f8fbff;
    color: #475467;
    font-size: 13px;
    line-height: 1.5;
}

.store-settings-stock-help strong {
    color: #1d4ed8;
}

@media (max-width: 860px) {
    .admin-stock-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-stock-dashboard-head {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-stock-dashboard-head .btn {
        width: 100%;
        justify-content: center;
    }

    .admin-stock-list-card {
        padding: 14px;
        border-radius: 16px;
    }

    .admin-stock-list li {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-stock-list li .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 861px) {
    .store-settings-footer-controls input[type="number"] {
        width: 74px;
        min-height: 42px;
        padding: 9px 10px;
        text-align: center;
    }
}

.product-frame-mode-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.product-frame-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
}

.product-frame-chip.is-muted {
    background: rgba(100, 116, 139, 0.12);
    color: #475569;
}

.product-frame-chip.is-soft {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.product-gallery-existing-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.product-frame-preview-hint-only {
    min-height: 100%;
    padding: 16px;
    border: 1px dashed #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}

.product-gallery-frame-box,
.variant-frame-admin-box {
    margin: 18px 0;
}

@media (max-width: 768px) {
    .product-frame-mode-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-gallery-existing-meta {
        display: flex;
        margin-bottom: 6px;
    }
}

.product-gallery-frame-preview-wrap {
    margin-top: 14px;
}

.product-gallery-frame-preview-wrap .product-frame-preview-canvas-wrap {
    max-width: 640px;
}


/* Revisi UI frame galeri: field manual hanya tampil saat mode Atur Manual Khusus Galeri. */
.product-gallery-manual-settings[hidden],
.product-gallery-manual-settings.is-hidden,
.product-frame-grid[hidden] {
    display: none !important;
}


/* Halaman Testimoni */
.testimonial-page {
    padding: 0 0 34px;
}

.testimonial-breadcrumb-section {
    padding-top: 18px;
}

.testimonial-breadcrumb-section .product-breadcrumb {
    margin-bottom: 10px;
}

.testimonial-container {
    max-width: 1080px;
}

.testimonial-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 18px;
    align-items: stretch;
    margin: 14px 0 18px;
    padding: 22px;
    border: 1px solid #e4e9f2;
    border-radius: 22px;
    background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.08);
}

.testimonial-eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 8px;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #2563eb;
    font-size: 0.82rem;
    font-weight: 700;
}

.testimonial-hero-content h1 {
    margin: 0 0 8px;
    font-size: clamp(1.55rem, 4vw, 2.2rem);
    line-height: 1.16;
}

.testimonial-hero-content p {
    margin: 0;
    color: #566277;
    line-height: 1.65;
}

.testimonial-rating-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    min-height: 150px;
    padding: 18px;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #1e3a8a;
    text-align: center;
}

.testimonial-rating-score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}

.testimonial-rating-score i {
    color: #fbbf24;
    font-size: 1.45rem;
}

.testimonial-rating-score strong {
    font-size: 2.2rem;
}

.testimonial-rating-summary span {
    font-weight: 700;
}

.testimonial-rating-summary small {
    color: #475569;
}

.testimonial-list-section {
    margin-top: 18px;
}

.testimonial-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.testimonial-section-head h2 {
    margin: 0 0 4px;
    font-size: 1.18rem;
}

.testimonial-section-head p {
    margin: 0;
    color: #697386;
}

.testimonial-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    padding: 16px;
    border: 1px solid #e4e9f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.testimonial-card-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.testimonial-card-top strong {
    display: block;
    color: #111827;
    font-size: 0.95rem;
}

.testimonial-stars {
    margin-top: 4px;
}

.testimonial-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.testimonial-text-wrap {
    display: block;
}

.testimonial-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
    color: #334155;
    line-height: 1.62;
}

.testimonial-text.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.testimonial-readmore {
    margin-top: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #2563eb;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 700;
}

.testimonial-readmore:hover {
    text-decoration: underline;
}

.testimonial-readmore[hidden] {
    display: none !important;
}

.testimonial-meta-line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin-top: auto;
    color: #64748b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.testimonial-meta-line span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.testimonial-product-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

.testimonial-product-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.testimonial-product-unavailable {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    color: #94a3b8;
    font-size: 0.86rem;
    font-weight: 700;
}

.testimonial-product-link:hover {
    text-decoration: underline;
}

.testimonial-pagination,
.testimonial-loading {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.testimonial-loading {
    gap: 8px;
    color: #64748b;
}

.testimonial-loading[hidden] {
    display: none !important;
}

.testimonial-pagination-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pagination-btn {
    min-width: 38px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    font-weight: 700;
    padding: 8px 12px;
}

.pagination-btn.is-active,
.pagination-btn[aria-current="page"] {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

.pagination-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pagination-ellipsis {
    color: #94a3b8;
    font-weight: 700;
}

.testimonial-settings-form .form-group textarea.admin-setting-control {
    width: 100%;
}

.testimonial-settings-note {
    margin: 12px 0 16px;
}

@media (max-width: 900px) {
    .testimonial-hero-card {
        grid-template-columns: 1fr;
    }

    .testimonial-rating-summary {
        min-height: auto;
    }

    .testimonial-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .testimonial-page {
        padding-top: 12px;
    }

    .testimonial-hero-card {
        padding: 16px;
        border-radius: 18px;
    }

    .testimonial-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .testimonial-all-products-link {
        width: fit-content;
    }

    .testimonial-list {
        grid-template-columns: 1fr;
    }

    .testimonial-card-top {
        flex-direction: column;
    }

    .testimonial-verified-badge {
        width: fit-content;
    }
}


/* Revisi Testimoni mobile: rapatkan jarak atas agar breadcrumb dan hero tidak terlalu turun. */
@media (max-width: 640px) {
    body.frontend-body .testimonial-breadcrumb-section {
        padding-top: 6px !important;
    }

    body.frontend-body .testimonial-breadcrumb-section .product-breadcrumb {
        margin-top: 0 !important;
        margin-bottom: 6px !important;
    }

    body.frontend-body .testimonial-page {
        padding-top: 0 !important;
    }

    body.frontend-body .testimonial-hero-card {
        margin-top: 6px !important;
    }
}


/* Cart Popup Qty Auto Width V1 - angka qty melebar mengikuti digit tanpa memotong 10/100/1000. */
.cart-popup-modern .cart-popup-qty {
    display: inline-grid !important;
    grid-template-columns: 28px auto 28px !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
    width: calc((var(--cart-qty-digits, 1) * 1ch) + 18px) !important;
    min-width: 30px !important;
    max-width: 88px !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.cart-popup-modern .cart-popup-qty button {
    width: 28px !important;
    min-width: 28px !important;
    flex: 0 0 28px !important;
}

@media (max-width: 390px) {
    .cart-popup-modern .cart-popup-qty {
        grid-template-columns: 26px auto 26px !important;
    }

    .cart-popup-modern .cart-popup-qty button {
        width: 26px !important;
        min-width: 26px !important;
        flex-basis: 26px !important;
    }

    .cart-popup-modern .cart-popup-qty input.cart-popup-qty-input {
        min-width: 28px !important;
        max-width: 78px !important;
        padding: 0 5px !important;
    }
}

/* Cart Popup Desktop Compact Width V1 - desktop dibuat lebih padat agar ruang kosong tengah berkurang. */
@media (min-width: 769px) {
    .cart-popup-overlay.site-cart-popup {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .cart-popup-dialog.cart-popup-modern {
        width: min(580px, calc(100vw - 36px)) !important;
        max-width: 580px !important;
    }

    .cart-popup-modern .cart-popup-header {
        min-height: 68px !important;
        padding: 14px 18px !important;
    }

    .cart-popup-modern .cart-popup-list {
        padding: 9px 12px !important;
        gap: 7px !important;
    }

    .cart-popup-modern .cart-popup-item {
        grid-template-columns: 58px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    .cart-popup-modern .cart-popup-item-media,
    .cart-popup-modern .cart-popup-item-image {
        width: 58px !important;
    }

    .cart-popup-modern .cart-popup-item-image {
        height: 43px !important;
    }

    .cart-popup-modern .cart-popup-item-bottom {
        gap: 5px !important;
    }

    .cart-popup-modern .cart-popup-footer {
        padding: 9px 12px 13px !important;
    }

    .cart-popup-modern .cart-popup-actions {
        gap: 9px !important;
    }
}

/* Grup Varian Produk - admin dan detail produk */
.admin-variant-group-settings-card,
.admin-variant-groups-card {
    margin-bottom: 18px;
}

.admin-toggle-line {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 8px 0 16px;
    font-weight: 700;
    color: #1f2937;
}

.admin-toggle-line input {
    width: 18px;
    height: 18px;
}

.admin-form-grid-3 {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(110px, 0.5fr) minmax(140px, 0.6fr);
    gap: 14px;
    align-items: end;
}

.admin-variant-group-add-form {
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    background: #f9fafb;
    margin-bottom: 16px;
}

.admin-variant-sort-input {
    min-width: 84px;
}

.admin-actions-cell {
    white-space: nowrap;
}

.admin-variant-group-row-form input,
.admin-variant-group-row-form select {
    min-width: 120px;
}

.detail-variant-section-title {
    margin: 0 0 9px;
    color: #374151;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.detail-variant-group-section,
.detail-variant-option-section {
    margin-bottom: 18px;
}

.detail-variant-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.detail-variant-group-button {
    min-height: 46px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #ffffff;
    color: #374151;
    padding: 8px 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.detail-variant-group-button:hover,
.detail-variant-group-button.is-active {
    border-color: #86d23f;
    background: #ecf9e4;
    color: #256b12;
    box-shadow: 0 8px 18px rgba(134, 210, 63, 0.13);
}

.detail-variant-group-panel[hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    .admin-form-grid-3 {
        grid-template-columns: 1fr;
    }

    .admin-actions-cell {
        white-space: normal;
    }

    .detail-variant-group-grid {
        gap: 8px;
    }

    .detail-variant-group-button {
        min-height: 44px;
        padding: 7px 9px;
        font-size: 13px;
    }
}

/* Checkout Qty Editor V1 - edit jumlah langsung dari ringkasan pesanan. */
body.frontend-body .checkout-order-item.checkout-order-item-editable {
    grid-template-columns: 88px minmax(0, 1fr) auto;
    align-items: center;
}

body.frontend-body .checkout-order-info span em {
    color: #475467;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

body.frontend-body .checkout-order-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: max-content;
}

body.frontend-body .checkout-order-qty {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    overflow: visible;
    border: 1px solid #edf1f5;
    border-radius: 11px;
    background: #f8fafc;
    white-space: nowrap;
    isolation: isolate;
}

body.frontend-body .checkout-order-qty button,
body.frontend-body .checkout-order-remove {
    appearance: none;
    border: 0;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, opacity .18s ease, transform .18s ease;
}

body.frontend-body .checkout-order-qty button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 34px;
    background: #eef2f7;
    color: #475467;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

body.frontend-body .checkout-order-qty button:hover:not(:disabled) {
    background: #e4f6dc;
    color: #3f9e1f;
}

body.frontend-body .checkout-order-qty button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

body.frontend-body .checkout-order-qty-input {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: calc((var(--checkout-qty-digits, 1) * 1ch) + 42px) !important;
    min-width: 44px !important;
    max-width: 150px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 34px !important;
    text-align: center !important;
    box-shadow: none !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: .01em !important;
    caret-color: #111827 !important;
    position: relative !important;
    z-index: 1 !important;
}

body.frontend-body .checkout-order-qty-input:focus {
    outline: 0 !important;
    box-shadow: inset 0 0 0 2px rgba(101, 184, 47, .20) !important;
    caret-color: #111827 !important;
}

body.frontend-body .checkout-order-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #fff1f3;
    color: #e11d48;
    font-size: 14px;
}

body.frontend-body .checkout-order-remove:hover {
    background: #ffe4e8;
    color: #be123c;
    transform: translateY(-1px);
}

body.frontend-body .checkout-order-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

body.frontend-body .checkout-add-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #cfe9c7;
    border-radius: 12px;
    background: #f7fff3;
    color: #3f9e1f;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

body.frontend-body .checkout-add-more-link:hover {
    border-color: #9dd87b;
    background: #ecfbe7;
    color: #2f8616;
}

body.frontend-body .checkout-cart-inline-message {
    min-width: 0;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
}

body.frontend-body .checkout-cart-inline-message.is-success {
    color: #15803d;
}

body.frontend-body .checkout-cart-inline-message.is-error {
    color: #dc2626;
}

body.frontend-body .checkout-cart-inline-message.is-info {
    color: #2563eb;
}

body.frontend-body .checkout-order-empty {
    display: grid;
    gap: 7px;
    padding: 16px;
    border: 1px dashed #dfe4ea;
    border-radius: 15px;
    background: #fbfcfe;
    color: #667085;
    text-align: center;
}

body.frontend-body .checkout-order-empty[hidden] {
    display: none !important;
}

body.frontend-body .checkout-order-empty strong {
    color: #111827;
    font-size: 15px;
    font-weight: 850;
}

body.frontend-body .checkout-order-empty a {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: 4px;
    padding: 8px 13px;
    border-radius: 12px;
    background: #6fc936;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 768px) {
    body.frontend-body .checkout-order-item.checkout-order-item-editable {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
    }

    body.frontend-body .checkout-order-actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
        padding-top: 1px;
    }

    body.frontend-body .checkout-order-qty {
        width: max-content;
        max-width: 100%;
    }

    body.frontend-body .checkout-order-qty button,
    body.frontend-body .checkout-order-qty-input,
    body.frontend-body .checkout-order-remove {
        height: 36px !important;
    }

    body.frontend-body .checkout-order-qty button {
        width: 30px;
    }

    body.frontend-body .checkout-order-remove {
        width: 36px;
    }

    body.frontend-body .checkout-order-tools {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    body.frontend-body .checkout-add-more-link {
        width: 100%;
    }

    body.frontend-body .checkout-cart-inline-message {
        text-align: left;
    }
}

@media (max-width: 360px) {
    body.frontend-body .checkout-order-qty button {
        width: 28px;
    }

    body.frontend-body .checkout-order-qty-input {
        min-width: 42px !important;
        max-width: 132px !important;
        padding: 0 10px !important;
    }
}

/* Checkout Qty Compact Like Cart V1 - qty di checkout dibuat ringkas seperti modal keranjang. */
body.frontend-body .checkout-order-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: max-content !important;
}

body.frontend-body .checkout-order-qty {
    display: inline-grid !important;
    grid-template-columns: 28px auto 28px !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 34px !important;
    overflow: hidden !important;
    border: 1px solid #edf1f5 !important;
    border-radius: 11px !important;
    background: #f8fafc !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
}

body.frontend-body .checkout-order-qty button {
    width: 28px !important;
    min-width: 28px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 28px !important;
    border: 0 !important;
    background: #eef2f7 !important;
    color: #475467 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

body.frontend-body .checkout-order-qty-input,
body.frontend-body .checkout-form-simple input.checkout-order-qty-input {
    width: calc((var(--checkout-qty-digits, 1) * 1ch) + 18px) !important;
    min-width: 30px !important;
    max-width: 88px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: #ffffff !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 34px !important;
    text-align: center !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    appearance: textfield !important;
    -moz-appearance: textfield !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: .01em !important;
    caret-color: #111827 !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

body.frontend-body .checkout-order-qty-input::-webkit-outer-spin-button,
body.frontend-body .checkout-order-qty-input::-webkit-inner-spin-button {
    margin: 0 !important;
    -webkit-appearance: none !important;
}

body.frontend-body .checkout-order-qty-input:focus,
body.frontend-body .checkout-form-simple input.checkout-order-qty-input:focus {
    outline: 0 !important;
    box-shadow: inset 0 0 0 1px rgba(101, 184, 47, .34) !important;
    caret-color: #111827 !important;
}

@media (max-width: 390px) {
    body.frontend-body .checkout-order-qty {
        grid-template-columns: 26px auto 26px !important;
    }

    body.frontend-body .checkout-order-qty button {
        width: 26px !important;
        min-width: 26px !important;
        flex-basis: 26px !important;
    }

    body.frontend-body .checkout-order-qty-input,
    body.frontend-body .checkout-form-simple input.checkout-order-qty-input {
        min-width: 28px !important;
        max-width: 78px !important;
        padding: 0 5px !important;
    }
}

/* Checkout Ringkas V1 - ringkasan pesanan dibuat compact seperti popup keranjang. */
body.frontend-body .checkout-order-item.checkout-order-item-editable {
    grid-template-columns: 74px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px !important;
}

body.frontend-body .checkout-order-thumb {
    width: 74px !important;
    height: 58px !important;
    border-radius: 10px !important;
}

body.frontend-body .checkout-order-info {
    gap: 1px !important;
    align-self: center !important;
}

body.frontend-body .checkout-order-info strong {
    font-size: 14px !important;
    line-height: 1.18 !important;
}

body.frontend-body .checkout-order-info span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #667085 !important;
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.frontend-body .checkout-order-info span em {
    display: none !important;
}

body.frontend-body .checkout-order-info b {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

body.frontend-body .checkout-order-actions {
    align-self: center !important;
    gap: 7px !important;
}

body.frontend-body .checkout-order-qty {
    grid-template-columns: 26px auto 26px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
}

body.frontend-body .checkout-order-qty button {
    width: 26px !important;
    min-width: 26px !important;
    height: 32px !important;
    min-height: 32px !important;
    flex-basis: 26px !important;
    font-size: 13px !important;
}

body.frontend-body .checkout-order-qty-input,
body.frontend-body .checkout-form-simple input.checkout-order-qty-input {
    width: calc((var(--checkout-qty-digits, 1) * 1ch) + 18px) !important;
    min-width: 30px !important;
    max-width: 84px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 6px !important;
    font-size: 13px !important;
    line-height: 32px !important;
}

body.frontend-body .checkout-order-remove {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
}

@media (max-width: 768px) {
    body.frontend-body .checkout-order-items {
        gap: 10px !important;
    }

    body.frontend-body .checkout-order-item.checkout-order-item-editable {
        grid-template-columns: 72px minmax(0, 1fr) auto !important;
        gap: 9px !important;
        padding: 9px !important;
    }

    body.frontend-body .checkout-order-thumb {
        width: 72px !important;
        height: 56px !important;
    }

    body.frontend-body .checkout-order-actions {
        grid-column: auto !important;
        justify-content: flex-end !important;
        padding-top: 0 !important;
    }

    body.frontend-body .checkout-order-qty {
        grid-template-columns: 28px auto 28px !important;
        min-height: 34px !important;
    }

    body.frontend-body .checkout-order-qty button {
        width: 28px !important;
        min-width: 28px !important;
        height: 34px !important;
        min-height: 34px !important;
        flex-basis: 28px !important;
    }

    body.frontend-body .checkout-order-qty-input,
    body.frontend-body .checkout-form-simple input.checkout-order-qty-input {
        min-width: 30px !important;
        max-width: 82px !important;
        height: 34px !important;
        min-height: 34px !important;
        line-height: 34px !important;
    }

    body.frontend-body .checkout-order-remove {
        width: 34px !important;
        height: 34px !important;
    }
}

@media (max-width: 480px) {
    body.frontend-body .checkout-section-head h2 {
        font-size: 17px !important;
    }

    body.frontend-body .checkout-order-item.checkout-order-item-editable {
        grid-template-columns: 68px minmax(0, 1fr) auto !important;
        gap: 8px !important;
        padding: 8px !important;
        border-radius: 14px !important;
    }

    body.frontend-body .checkout-order-thumb {
        width: 68px !important;
        height: 53px !important;
        border-radius: 10px !important;
    }

    body.frontend-body .checkout-order-info strong {
        font-size: 13.5px !important;
    }

    body.frontend-body .checkout-order-info span {
        font-size: 12px !important;
    }

    body.frontend-body .checkout-order-info b {
        font-size: 13.5px !important;
    }

    body.frontend-body .checkout-order-actions {
        gap: 6px !important;
    }

    body.frontend-body .checkout-order-qty {
        grid-template-columns: 26px auto 26px !important;
        min-height: 32px !important;
    }

    body.frontend-body .checkout-order-qty button {
        width: 26px !important;
        min-width: 26px !important;
        height: 32px !important;
        min-height: 32px !important;
        flex-basis: 26px !important;
    }

    body.frontend-body .checkout-order-qty-input,
    body.frontend-body .checkout-form-simple input.checkout-order-qty-input {
        min-width: 28px !important;
        max-width: 74px !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 5px !important;
        line-height: 32px !important;
    }

    body.frontend-body .checkout-order-remove {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 380px) {
    body.frontend-body .checkout-order-item.checkout-order-item-editable {
        grid-template-columns: 62px minmax(0, 1fr) auto !important;
        gap: 7px !important;
        padding: 7px !important;
    }

    body.frontend-body .checkout-order-thumb {
        width: 62px !important;
        height: 49px !important;
    }

    body.frontend-body .checkout-order-actions {
        gap: 5px !important;
    }

    body.frontend-body .checkout-order-qty {
        grid-template-columns: 24px auto 24px !important;
        min-height: 30px !important;
    }

    body.frontend-body .checkout-order-qty button {
        width: 24px !important;
        min-width: 24px !important;
        height: 30px !important;
        min-height: 30px !important;
        flex-basis: 24px !important;
    }

    body.frontend-body .checkout-order-qty-input,
    body.frontend-body .checkout-form-simple input.checkout-order-qty-input {
        min-width: 27px !important;
        max-width: 68px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 4px !important;
        font-size: 12.5px !important;
        line-height: 30px !important;
    }

    body.frontend-body .checkout-order-remove {
        width: 30px !important;
        height: 30px !important;
    }
}

/* Statistik Dilihat & Terjual Produk */
.detail-product-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: -4px 0 12px;
    color: #64748b;
    font-size: 0.88rem;
    line-height: 1.4;
}

.detail-product-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.detail-product-stats i {
    color: #94a3b8;
    font-size: 0.85rem;
}

.detail-product-stats-separator {
    color: #cbd5e1;
}

.product-stat-admin-box {
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #f8fbff;
    padding: 16px;
}

.product-stat-admin-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.product-stat-admin-grid,
.product-stat-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.product-stat-admin-summary,
.product-stat-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.product-stat-admin-summary span,
.product-stat-counter-grid > div {
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    padding: 10px 12px;
    color: #64748b;
    font-size: 0.86rem;
}

.product-stat-admin-summary strong,
.product-stat-counter-grid strong {
    display: block;
    color: #0f172a;
    font-size: 1.02rem;
}

.product-stat-action-box h2,
.product-stat-settings-page h2,
.product-stat-maintenance-box h2 {
    margin-top: 0;
}

.product-stat-section-note {
    margin-bottom: 12px;
}

.product-stat-total-box {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid #dbeafe;
    border-radius: 16px;
    background: #f8fbff;
}

.product-stat-total-box h3 {
    margin: 0 0 6px;
    color: #1e293b;
    font-size: 1rem;
}

.product-stat-set-total-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.product-stat-set-total-grid form {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    padding: 12px;
}

.product-stat-total-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.product-stat-total-input-row input[type="number"] {
    width: 160px;
}

.product-stat-advanced-box,
.product-stat-cleanup-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.product-stat-advanced-box h3,
.product-stat-cleanup-card h3 {
    margin: 0 0 6px;
    color: #1e293b;
    font-size: 1rem;
}

.product-stat-action-grid,
.product-stat-cleanup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.product-stat-action-grid form,
.product-stat-cleanup-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.product-stat-action-grid form {
    flex: 1 1 230px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    padding: 10px;
}

.product-stat-action-grid form small {
    display: block;
    width: 100%;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
}

.product-stat-action-grid .btn {
    width: 100%;
}

.product-stat-days-input {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.product-stat-cleanup-actions input[type="number"] {
    width: 110px;
}

.product-stat-table-wrap small {
    color: #64748b;
}

.product-stat-list-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.product-stat-list-head h2 {
    margin-bottom: 4px;
}

.product-stat-filter-form {
    margin: 14px 0 16px;
    padding: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
}

.product-stat-filter-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, 1fr));
    gap: 12px;
    align-items: end;
}

.product-stat-filter-grid .form-group {
    margin-bottom: 0;
}

.product-stat-filter-grid .form-group > label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.88rem;
    line-height: 1.25;
}

.product-stat-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.product-stat-search-field i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 0.9rem;
    pointer-events: none;
}

.product-stat-search-field input[type="search"] {
    width: 100%;
    max-width: none;
    min-height: 48px;
    padding: 12px 14px 12px 42px;
    border: 1px solid #dce3ee;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font: inherit;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.product-stat-search-field input[type="search"]::placeholder {
    color: #98a2b3;
}

.product-stat-search-field input[type="search"]::-webkit-search-decoration,
.product-stat-search-field input[type="search"]::-webkit-search-cancel-button,
.product-stat-search-field input[type="search"]::-webkit-search-results-button,
.product-stat-search-field input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.product-stat-search-field input[type="search"]:focus {
    outline: none;
    border-color: #60a5fa;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}

.product-stat-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
}

.product-stat-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-stat-row-actions .btn-small {
    white-space: nowrap;
}

.product-stat-pagination {
    margin-top: 16px;
}

@media (max-width: 760px) {
    .product-stat-admin-head {
        display: block;
    }

    .product-stat-admin-head .btn {
        margin-top: 10px;
    }

    .product-stat-admin-grid,
    .product-stat-settings-grid,
    .product-stat-set-total-grid,
    .product-stat-admin-summary,
    .product-stat-counter-grid {
        grid-template-columns: 1fr;
    }

    .product-stat-cleanup-actions,
    .product-stat-action-grid,
    .product-stat-cleanup-actions form,
    .product-stat-action-grid form {
        display: block;
    }

    .product-stat-days-input {
        display: flex;
        width: 100%;
        margin-top: 8px;
    }

    .product-stat-days-input input[type="number"],
    .product-stat-total-input-row input[type="number"] {
        flex: 1;
        min-width: 0;
    }

    .product-stat-cleanup-actions .btn,
    .product-stat-action-grid .btn,
    .product-stat-total-input-row .btn,
    .product-stat-cleanup-actions input[type="number"],
    .product-stat-total-input-row input[type="number"] {
        width: 100%;
        margin-top: 8px;
    }

    .product-stat-days-input input[type="number"] {
        margin-top: 0;
    }


    .product-stat-list-head {
        display: block;
    }

    .product-stat-list-head .btn {
        margin-top: 10px;
    }

    .product-stat-filter-grid {
        grid-template-columns: 1fr;
    }

    .product-stat-search-field input[type="search"] {
        min-height: 46px;
        border-radius: 14px;
    }

    .product-stat-filter-actions,
    .product-stat-row-actions {
        display: block;
    }

    .product-stat-filter-actions .btn,
    .product-stat-row-actions .btn-small {
        width: 100%;
        margin-top: 8px;
    }
}

/* Cart Modern REV46 - halaman keranjang mengikuti pola qty checkout, input manual, dan ringkasan lebih bersih. */
body.frontend-body .cart-page-modern {
    width: min(100% - 36px, 1120px);
    margin: 0 auto;
    padding: 24px 0 10px;
}

body.frontend-body .cart-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

body.frontend-body .cart-page-eyebrow {
    margin: 0 0 5px;
    color: #2563eb;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .12em;
    line-height: 1.2;
    text-transform: uppercase;
}

body.frontend-body .cart-page-head h1 {
    margin: 0;
    color: #111827;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

body.frontend-body .cart-page-head p {
    max-width: 620px;
    margin: 8px 0 0;
    color: #667085;
    font-size: 15px;
    line-height: 1.55;
}

body.frontend-body .cart-page-count {
    min-width: 92px;
    padding: 12px 14px;
    border: 1px solid #e5eaf2;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
    text-align: center;
}

body.frontend-body .cart-page-count strong {
    display: block;
    color: #111827;
    font-size: 24px;
    line-height: 1;
}

body.frontend-body .cart-page-count span {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}

body.frontend-body .cart-alert {
    margin-bottom: 14px;
}

body.frontend-body .cart-alert.alert-info {
    border-color: #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
}

body.frontend-body .cart-layout-modern {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

body.frontend-body .cart-items-card,
body.frontend-body .cart-summary-card,
body.frontend-body .cart-empty-modern {
    border: 1px solid #e6ebf3;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

body.frontend-body .cart-items-card {
    overflow: hidden;
}

body.frontend-body .cart-items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf1f5;
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

body.frontend-body .cart-items-head strong {
    display: block;
    color: #111827;
    font-size: 16px;
    font-weight: 850;
    line-height: 1.2;
}

body.frontend-body .cart-items-head span {
    display: block;
    margin-top: 3px;
    color: #667085;
    font-size: 13px;
    line-height: 1.35;
}

body.frontend-body .cart-add-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #cfe9c7;
    border-radius: 12px;
    background: #f7fff3;
    color: #3f9e1f;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

body.frontend-body .cart-add-link:hover {
    border-color: #9dd87b;
    background: #ecfbe7;
    color: #2f8616;
}

body.frontend-body .cart-item-list {
    display: grid;
    gap: 0;
}

body.frontend-body .cart-item-modern {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto minmax(116px, auto) auto;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #edf1f5;
}

body.frontend-body .cart-item-modern:last-child {
    border-bottom: 0;
}

body.frontend-body .cart-item-thumb {
    width: 84px;
    height: 64px;
    border: 1px solid #edf1f5;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8fafc;
    color: #98a2b3;
    text-decoration: none;
}

body.frontend-body .cart-item-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

body.frontend-body .cart-item-info {
    min-width: 0;
    display: grid;
    gap: 4px;
}

body.frontend-body .cart-item-title {
    width: max-content;
    max-width: 100%;
    overflow: hidden;
    color: #111827;
    font-size: 15px;
    font-weight: 850;
    line-height: 1.25;
    text-overflow: ellipsis;
    text-decoration: none;
    white-space: nowrap;
}

body.frontend-body .cart-item-title:hover {
    color: var(--primary-dark);
}

body.frontend-body .cart-item-variant {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: #667085;
    font-size: 13px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.frontend-body .cart-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

body.frontend-body .cart-item-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f4f6f9;
    color: #475467;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.15;
}

body.frontend-body .cart-qty-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    gap: 0;
    margin: 0;
    padding: 3px;
    border: 1px solid #e5eaf2;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .05);
}

body.frontend-body .cart-qty-button {
    appearance: none;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    color: #2563eb;
    cursor: pointer;
    font: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}

body.frontend-body .cart-qty-button:hover:not(:disabled) {
    background: #eff6ff;
    color: #1d4ed8;
    transform: translateY(-1px);
}

body.frontend-body .cart-qty-button:disabled {
    opacity: .38;
    cursor: not-allowed;
}

body.frontend-body .cart-qty-input {
    appearance: textfield;
    width: calc((var(--cart-qty-digits, 1) * 1ch) + 24px);
    min-width: 34px;
    max-width: 92px;
    height: 36px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #111827;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.frontend-body .cart-qty-input::-webkit-outer-spin-button,
body.frontend-body .cart-qty-input::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

body.frontend-body .cart-qty-input:focus {
    border-radius: 999px;
    background: #eef6ff;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

body.frontend-body .cart-item-total {
    display: grid;
    gap: 3px;
    min-width: 120px;
    text-align: right;
}

body.frontend-body .cart-item-total span {
    color: #98a2b3;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
}

body.frontend-body .cart-item-total strong {
    color: #111827;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

body.frontend-body .cart-item-action {
    display: flex;
    justify-content: flex-end;
}

body.frontend-body .cart-remove-form {
    margin: 0;
}

body.frontend-body .cart-remove-button {
    appearance: none;
    min-height: 36px;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 11px;
    background: #fff1f3;
    color: #e11d48;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
}

body.frontend-body .cart-remove-button:hover {
    background: #ffe4e8;
    color: #be123c;
}

body.frontend-body .cart-summary-card {
    position: sticky;
    top: 96px;
    padding: 18px;
}

body.frontend-body .cart-summary-head {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 15px;
}

body.frontend-body .cart-summary-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #edf4ff;
    color: var(--primary-dark);
    font-size: 17px;
}

body.frontend-body .cart-summary-head strong {
    display: block;
    color: #111827;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
}

body.frontend-body .cart-summary-head span {
    display: block;
    margin-top: 2px;
    color: #667085;
    font-size: 13px;
    line-height: 1.3;
}

body.frontend-body .cart-summary-list {
    display: grid;
    gap: 0;
    margin: 0 0 16px;
}

body.frontend-body .cart-summary-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #edf1f5;
}

body.frontend-body .cart-summary-list dt,
body.frontend-body .cart-summary-list dd {
    margin: 0;
}

body.frontend-body .cart-summary-list dt {
    color: #667085;
    font-size: 13px;
    line-height: 1.35;
}

body.frontend-body .cart-summary-list dd {
    color: #111827;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.35;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body.frontend-body .cart-summary-list .cart-summary-total {
    align-items: flex-end;
    padding-top: 14px;
    border-bottom: 0;
}

body.frontend-body .cart-summary-total dt {
    color: #111827;
    font-weight: 850;
}

body.frontend-body .cart-summary-total dd {
    color: #111827;
    font-size: 20px;
    font-weight: 950;
}

body.frontend-body .cart-summary-actions {
    display: grid;
    gap: 9px;
}

body.frontend-body .cart-checkout-button,
body.frontend-body .cart-secondary-button,
body.frontend-body .cart-clear-button {
    width: 100%;
}

body.frontend-body .cart-secondary-button {
    border: 1px solid #dce7fb;
}

body.frontend-body .cart-clear-form {
    margin: 0;
}

body.frontend-body .cart-clear-button {
    appearance: none;
    min-height: 42px;
    border: 1px solid #ffd3dc;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff5f7;
    color: #be123c;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
}

body.frontend-body .cart-clear-button:hover {
    border-color: #fda4af;
    background: #ffe4e8;
}

body.frontend-body .cart-empty-modern {
    display: grid;
    justify-items: center;
    gap: 9px;
    max-width: 560px;
    margin: 0 auto;
    padding: 34px 22px;
    text-align: center;
}

body.frontend-body .cart-empty-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
    background: #edf4ff;
    color: var(--primary-dark);
    font-size: 24px;
}

body.frontend-body .cart-empty-modern strong {
    color: #111827;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
}

body.frontend-body .cart-empty-modern p {
    max-width: 420px;
    margin: 0 0 8px;
    color: #667085;
    font-size: 14px;
    line-height: 1.55;
}

@media (max-width: 980px) {
    body.frontend-body .cart-layout-modern {
        grid-template-columns: 1fr;
    }

    body.frontend-body .cart-summary-card {
        position: static;
    }
}

@media (max-width: 720px) {
    body.frontend-body .cart-page-modern {
        width: min(100% - 24px, 1160px);
        padding-top: 20px;
    }

    body.frontend-body .cart-page-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px;
    }

    body.frontend-body .cart-page-count {
        display: none;
    }

    body.frontend-body .cart-items-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }

    body.frontend-body .cart-add-link {
        width: 100%;
    }

    body.frontend-body .cart-item-modern {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        gap: 9px 10px;
        padding: 12px 14px;
    }

    body.frontend-body .cart-item-thumb {
        width: 72px;
        height: 56px;
        border-radius: 12px;
    }

    body.frontend-body .cart-item-title {
        font-size: 14px;
    }

    body.frontend-body .cart-item-variant {
        font-size: 12.5px;
    }

    body.frontend-body .cart-item-meta {
        gap: 5px;
    }

    body.frontend-body .cart-item-meta span {
        min-height: 22px;
        padding: 4px 7px;
        font-size: 11.5px;
    }

    body.frontend-body .cart-qty-form {
        grid-column: 2 / -1;
        grid-row: 2;
        justify-self: start;
        margin-top: 1px;
    }

    body.frontend-body .cart-item-total {
        grid-column: 2 / -1;
        grid-row: 3;
        min-width: 0;
        text-align: left;
    }

    body.frontend-body .cart-item-action {
        align-self: start;
        grid-column: 3;
        grid-row: 1;
    }

    body.frontend-body .cart-remove-button {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 12px;
    }

    body.frontend-body .cart-remove-button span {
        display: none;
    }

    body.frontend-body .cart-summary-card {
        padding: 16px;
    }

    body.frontend-body .cart-summary-actions {
        gap: 8px;
    }
}

@media (max-width: 420px) {
    body.frontend-body .cart-page-head h1 {
        font-size: 26px;
    }

    body.frontend-body .cart-item-modern {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        padding: 10px;
        border-radius: 0;
    }

    body.frontend-body .cart-item-thumb {
        width: 64px;
        height: 50px;
    }

    body.frontend-body .cart-qty-form {
        min-height: 40px;
        padding: 2px;
    }

    body.frontend-body .cart-qty-button {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    body.frontend-body .cart-qty-input {
        height: 34px;
        font-size: 14px;
    }

    body.frontend-body .cart-item-meta span:nth-child(3) {
        display: none;
    }

    body.frontend-body .cart-summary-total dd {
        font-size: 18px;
    }
}

/* REV43 - AJAX Keranjang: feedback ringan tanpa refresh penuh */
body.frontend-body .cart-alert-js[hidden] {
    display: none !important;
}

body.frontend-body .cart-qty-form.is-loading,
body.frontend-body .cart-remove-form.is-loading,
body.frontend-body .cart-clear-form.is-loading {
    opacity: .72;
    pointer-events: none;
}

body.frontend-body .cart-item-modern.is-removing {
    opacity: .55;
}