/* ---- Page ---- */
        .page-wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 56px; }
        .error-banner {
            background: var(--white); border: 1px solid var(--gold); color: #a13227; border-radius: 8px;
            padding: 14px 18px; font-size: 14px; text-align: center;
        }
        .error-banner a { color: var(--navy); font-weight: 700; }

        /* ---- Product top section ---- */
        .produk-detail {
            display: flex;
            gap: 32px;
            background: var(--white);
            border-radius: 12px;
            padding: 26px;
            box-shadow: 0 1px 4px rgba(10,25,47,0.12);
            margin-bottom: 28px;
        }
        .detail-img-wrap {
            flex: 0 0 340px;
            aspect-ratio: 1 / 1;
            background: var(--soft-blue);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .detail-img-wrap img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
        .detail-img-placeholder { font-size: 64px; opacity: 0.35; }
        .detail-info { flex: 1 1 auto; min-width: 0; }
        .detail-kategori {
            display: inline-block; background: var(--soft-blue); color: var(--navy); font-size: 11px; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 10px; margin-bottom: 10px;
        }
        .detail-nama { font-size: 22px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
        .detail-harga { font-size: 26px; font-weight: 700; margin: 0; }
        .detail-harga .satuan { font-size: 13px; font-weight: 500; color: var(--slate); }
        .detail-harga.unavailable { font-size: 16px; font-weight: 500; font-style: italic; color: var(--slate); }
        .detail-stok { font-size: 13px; margin: 6px 0 20px; font-weight: 600; }
        .detail-stok.tersedia { color: #1e8e3e; }
        .detail-stok.habis { color: var(--slate); }

        .qty-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
        .qty-btn {
            width: 36px; height: 36px; border: 1px solid var(--soft-blue); background: var(--white); color: var(--navy);
            border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1;
        }
        .qty-btn:hover { background: var(--soft-blue); }
        .qty-input {
            width: 64px; text-align: center; border: 1px solid var(--soft-blue); border-radius: 8px;
            padding: 8px 4px; font-family: inherit; font-size: 15px; color: var(--navy);
        }
        .total-row { font-size: 15px; color: var(--navy); margin: 0 0 16px; }
        .total-row .total-value { font-weight: 700; font-size: 18px; color: var(--navy); }
        .add-cart-btn {
            border: none; border-radius: 8px; padding: 13px 32px; font-family: inherit; font-size: 15px; font-weight: 700;
            background: var(--gold); color: var(--navy); cursor: pointer;
        }
        .add-cart-btn:hover { background: #e6c200; }
        .add-cart-btn:disabled { background: var(--soft-blue); color: var(--slate); cursor: not-allowed; }

        /* ---- Description ---- */
        .desc-card {
            background: var(--white); border-radius: 12px; padding: 26px; box-shadow: 0 1px 4px rgba(10,25,47,0.12); margin-bottom: 28px;
        }
        .desc-card h2 { font-size: 17px; margin: 22px 0 6px; }
        .desc-card h2:first-child { margin-top: 0; }
        .desc-content { font-size: 14px; line-height: 1.7; color: #333; margin: 0 0 4px; }
        .desc-content h2 { font-size: 15px; margin: 16px 0 6px; color: var(--navy); }
        .desc-content h2:first-child { margin-top: 0; }
        .desc-empty { color: var(--slate); font-size: 13px; font-style: italic; }

        /* ---- Related ---- */
        .section-heading { font-size: 17px; margin: 0 0 14px; }
        .related-strip {
            display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch;
        }
        .related-card {
            flex: 0 0 130px; background: var(--white); border-radius: 10px; overflow: hidden;
            box-shadow: 0 1px 4px rgba(10,25,47,0.12); text-decoration: none; color: var(--navy);
            transition: transform 0.15s ease;
        }
        .related-card:hover { transform: translateY(-3px); }
        .related-img-wrap {
            aspect-ratio: 1 / 1; background: var(--soft-blue); display: flex; align-items: center; justify-content: center; overflow: hidden;
        }
        .related-img-wrap img { width: 100%; height: 100%; object-fit: contain; background: var(--white); }
        .related-img-placeholder { font-size: 24px; opacity: 0.35; }
        .related-nama {
            font-size: 12px; font-weight: 600; margin: 8px 8px 4px; line-height: 1.3; min-height: 31px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .related-harga { font-size: 12px; font-weight: 700; margin: 0 8px 10px; }