@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
    --ui-radius-xs:4px;
    --ui-radius-sm:6px;
    --ui-radius-md:8px;
    --ui-radius-lg:10px;
}

html{font-size:15px}
body{
    font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    font-size:.94rem;
    line-height:1.58;
    letter-spacing:-.006em;
}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,h5,h6{line-height:1.18;letter-spacing:-.025em}

/* Typography lebih proporsional */
.hero-store{padding:54px 0}
.hero-store h1{font-size:clamp(2rem,4.2vw,3.55rem);line-height:1.08;letter-spacing:-.04em}
.hero-store p{font-size:.96rem;line-height:1.7;margin-top:14px}
.page-hero{padding:42px 0}
.page-hero h1{font-size:clamp(1.75rem,3.2vw,2.65rem);letter-spacing:-.035em}
.page-hero p{font-size:.94rem;line-height:1.65}
.section-heading h1,.section-heading h2{font-size:1.48rem}
.content-card-v4 h2{font-size:1.4rem}
.content-card-v4 h3{font-size:1.08rem}
.content-card-v4 p{font-size:.9rem;line-height:1.65}
.cta-panel-v4 h2{font-size:1.4rem}
.auth-card h2{font-size:1.45rem}
.auth-card p{font-size:.88rem}
.brand-panel h1{font-size:clamp(1.9rem,3.5vw,3.5rem);line-height:1.08}
.brand-panel p{font-size:.95rem;line-height:1.65}
.stat-card strong{font-size:1.62rem}
.data-table{font-size:.82rem}
.data-table th{font-size:.68rem}
.side-link,.admin-nav{font-size:.84rem}
.btn-primary,.btn-secondary{font-size:.84rem;padding:10px 14px}

/* Radius lebih tegas/tidak terlalu tumpul */
.auth-card,.panel,.product-card,.account-sidebar,.stat-card,.empty-state,
.notice-box,.gateway-card,.banner-row,.refund-row,.brand-preview,.favicon-preview,
.content-card-v4,.contact-note-v4,.info-grid>div,.info-stack{
    border-radius:var(--ui-radius-md)!important;
}
.hero-visual,.product-detail-image,.cta-panel-v4{border-radius:var(--ui-radius-lg)!important}
.btn-primary,.btn-secondary,.site-nav a,.side-link,.admin-nav,.mobile-nav a,
.mobile-menu-button,.alert,.qty-input,.field-wrap input,.field-wrap select,
.field-wrap textarea,.refund-form textarea,.refund-form select,
.auth-card input:not([type=checkbox]){
    border-radius:var(--ui-radius-sm)!important;
}
.badge{border-radius:var(--ui-radius-xs)!important}
.loader-card{border-radius:var(--ui-radius-md)!important}

/* Contact: ikon gambar yang disediakan user */
.contact-card-v5{display:flex;flex-direction:column;align-items:flex-start}
.contact-icon-image-wrap-v5{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid #e2e8f0;
    background:#fff;
    border-radius:var(--ui-radius-md);
    padding:8px;
}
.contact-icon-image-v5{width:100%;height:100%;object-fit:contain;display:block}
.contact-card-v5 h2{font-size:1.02rem;margin-top:13px}
.contact-card-v5 p{margin-top:8px;overflow-wrap:anywhere}
.text-link-v4{font-size:.86rem;margin-top:11px}
.contact-note-v4{padding:18px}
.contact-note-v4 strong{font-size:.96rem}
.contact-note-v4 p{font-size:.86rem;line-height:1.6}
.contact-note-v4 a{font-size:.86rem;margin-top:9px}

/* Product image wajib 1:1 + desktop otomatis */
.product-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;
    gap:16px!important;
}
.product-card{min-width:0}
.product-image{
    width:100%;
    height:auto!important;
    aspect-ratio:1 / 1;
}
.product-image img{width:100%;height:100%;object-fit:cover}
.product-body{padding:16px}
.product-cat{font-size:.66rem;letter-spacing:.08em}
.product-body h3{
    font-size:1rem;
    margin-top:5px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.product-body p{
    font-size:.82rem;
    line-height:1.5;
    min-height:0;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}
.product-foot{margin-top:13px;gap:8px}
.product-foot strong{font-size:.88rem}
.product-foot a{font-size:.82rem}

/* Header/footer lebih compact */
.site-nav a{font-size:.82rem;padding:8px 9px}
.header-logo{height:40px;max-width:170px}
.footer-logo{height:46px;max-width:180px}
.site-footer{margin-top:42px}
.site-footer p,.footer-links a{font-size:.82rem}

@media(max-width:1023px){
    .hero-store{padding:42px 0}
    .page-hero{padding:36px 0}
    .product-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
}

@media(max-width:700px){
    html{font-size:14px}
    body{font-size:.92rem}
    .hero-store{padding:34px 0}
    .hero-store h1{font-size:clamp(1.78rem,8vw,2.35rem)!important}
    .hero-store p{font-size:.9rem;line-height:1.62}
    .page-hero{padding:30px 0}
    .page-hero h1{font-size:1.7rem}
    .section-heading h1,.section-heading h2{font-size:1.28rem}
    .content-card-v4 h2{font-size:1.24rem}
    .auth-card h2{font-size:1.3rem}

    /* Permintaan: mobile 2 card ke samping */
    .product-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:10px!important;
    }
    .product-body{padding:11px}
    .product-cat{font-size:.6rem}
    .product-body h3{font-size:.9rem;line-height:1.35}
    .product-body p{font-size:.74rem;line-height:1.42;margin-top:5px}
    .product-foot{margin-top:10px;align-items:flex-start;flex-direction:column;gap:4px}
    .product-foot strong{font-size:.82rem;line-height:1.35}
    .product-foot a{font-size:.76rem}
    .product-image span{width:48px;height:48px;border-radius:var(--ui-radius-md);font-size:22px}

    .contact-grid-v4{grid-template-columns:1fr!important;gap:12px}
    .content-card-v4{padding:17px}
    .contact-icon-image-wrap-v5{width:42px;height:42px;padding:7px}
    .contact-note-v4{padding:16px}

    .btn-primary,.btn-secondary{padding:9px 12px;font-size:.8rem}
    .header-logo{height:36px;max-width:145px}
    .mobile-menu-button{width:38px;height:38px}
    .data-table{font-size:.78rem}
}

@media(max-width:380px){
    .product-grid{gap:8px!important}
    .product-body{padding:9px}
    .product-body h3{font-size:.84rem}
    .product-body p{font-size:.7rem}
    .product-foot strong{font-size:.76rem}
}