/* ==========================================================================
   TWOSEASONS APPAREL BANDUNG - STYLESHEET RESMI (LIGHT MODE OPTIMIZED)
   Evaluasi Pembimbing: Bersih, Profesional, Tanpa Dark Mode Glow yang Mengganggu
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Tipografi Hierarchy Sesuai Spesifikasi Pembimbing */
.text-hero { font-size: clamp(32px, 4.5vw, 56px); }
.text-section { font-size: clamp(24px, 3.5vw, 36px); }
.text-card { font-size: 20px; }
.text-body { font-size: 15px; }
.text-small { font-size: 13px; }

/* Fixed Navigation Bar Styling */
.glass-nav {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
}

/* Cards & Panels */
.glass-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
}

/* Chips Filter Styling */
.filter-chip {
    padding: 10px 22px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
    cursor: pointer;
}

.filter-chip:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.filter-chip.active {
    background: #0f172a;
    color: #a3ff12;
    border-color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* Product Card - Micro Interactions */
.product-card {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);
}

/* Toast Notification Slide Animation */
@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

.toast-slide {
    animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.toast-fade-out {
    animation: fadeOut 0.25s ease forwards;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f8fafc; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Size Selector Button Active State */
.size-btn.active {
    border-color: #0f172a;
    background: #0f172a;
    color: #a3ff12 !important;
}

/* Smooth Section Margin for Fixed Header Scroll */
section {
    scroll-margin-top: 100px;
}

.nav-active{
    @apply
    border-color: #0f172a;
    background: #0f172a;
    color: #a3ff12 !important;
}
/* ======================================================================
   MOBILE UX IMPROVEMENTS
   - Mencegah overflow horizontal pada layar kecil
   - Menambah area sentuh navigasi dan membatasi tinggi menu mobile
   - Mengoptimalkan form, kartu produk, dan tombol mengambang untuk touch
   ====================================================================== */
html {
    scroll-padding-top: 6rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 320px;
    overflow-x: clip;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

section[id] {
    scroll-margin-top: 6rem;
}

#mobile-nav-panel {
    max-height: calc(100vh - 6.25rem);
    max-height: calc(100dvh - 6.25rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#mobile-nav-toggle,
#mobile-nav-panel a,
#mobile-nav-panel summary {
    min-height: 44px;
    touch-action: manipulation;
}

#mobile-nav-panel summary {
    list-style: none;
}

#mobile-nav-panel summary::-webkit-details-marker {
    display: none;
}

#mobile-nav-panel details[open] > summary {
    color: #047857;
    background: #f0fdf4;
}

#contact-form input,
#contact-form textarea,
#newsletter-form input,
#search-input,
#category-filter-select,
#sort-select {
    max-width: 100%;
}


@media (max-width: 1023px) {
    [data-site-header] {
        padding-left: max(0.5rem, env(safe-area-inset-left));
        padding-right: max(0.5rem, env(safe-area-inset-right));
    }

    [data-site-header] .glass-nav {
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
}

@media (max-width: 639px) {
    html {
        scroll-padding-top: 5.25rem;
    }

    section[id] {
        scroll-margin-top: 5.25rem;
    }

    [data-site-header] .glass-nav {
        border-radius: 1rem;
        gap: 0.5rem;
    }

    [data-site-header] .glass-nav > a:first-child {
        min-width: 0;
        gap: 0.5rem;
    }

    [data-site-header] .glass-nav > a:first-child > div:last-child {
        min-width: 0;
    }

    [data-site-header] .glass-nav > a:first-child span:first-child {
        max-width: 10rem;
        overflow-wrap: anywhere;
    }

    #mobile-nav-toggle {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    #mobile-nav-panel {
        margin-top: 0.5rem;
        border-radius: 1rem;
        padding: 0.5rem;
    }

    #mobile-nav-panel a,
    #mobile-nav-panel summary {
        padding-top: 0.8rem;
        padding-bottom: 0.8rem;
        font-size: 0.9rem;
    }

    #beranda {
        padding-top: 7.25rem;
        padding-bottom: 2.75rem;
    }

    #beranda h1 {
        font-size: clamp(1.9rem, 8.4vw, 2.35rem);
        overflow-wrap: anywhere;
    }

    #beranda .grid {
        min-width: 0;
    }

    #beranda .group > div {
        min-width: 0;
    }

    #katalog {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }

    #katalog .max-w-7xl > .flex {
        margin-bottom: 1.5rem;
    }

    #search-input,
    #category-filter-select,
    #sort-select,
    #contact-form input,
    #contact-form textarea,
    #newsletter-form input {
        font-size: 16px !important;
    }

    #search-input,
    #category-filter-select,
    #sort-select {
        min-height: 48px;
    }

    #product-grid {
        gap: 1rem;
    }

    #product-grid .product-card > a:first-child {
        height: clamp(13rem, 62vw, 17rem);
        padding: 1rem;
    }

    #product-grid .product-card > div.p-6 {
        padding: 1rem;
        gap: 0.875rem;
    }

    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.75rem;
    }

    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between > span,
    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between > div {
        width: 100%;
    }

    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between > div {
        justify-content: space-between;
        gap: 0.5rem;
    }

    #contact-form input {
        min-height: 48px;
    }

    #contact-form textarea {
        min-height: 7.5rem;
        resize: vertical;
    }

    #contact-form button[type="submit"],
    #newsletter-form button[type="submit"] {
        min-height: 48px;
    }

    #testimoni {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    #testimoni .max-w-7xl > .flex {
        margin-bottom: 1.75rem;
    }

    #testimoni .shrink-0 > a {
        width: 100%;
        justify-content: center;
        text-align: center;
        line-height: 1.4;
    }

    .floating-whatsapp {
        right: max(0.875rem, env(safe-area-inset-right));
        bottom: max(0.875rem, env(safe-area-inset-bottom));
        width: 3.25rem;
        height: 3.25rem;
        font-size: 1.25rem;
    }

    footer {
        padding-top: 3rem;
    }
}

@media (max-width: 374px) {
    #beranda .inline-flex.items-center.gap-2 {
        max-width: 100%;
        white-space: normal;
        align-items: flex-start;
    }

    #product-grid .product-card > div.p-6 {
        padding: 0.875rem;
    }

    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between > div > a,
    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between > div > button {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
}

@media (hover: none) {
    .product-card:hover {
        transform: none;
    }
}

@media (max-width: 639px) {
    /* Ukuran kontrol konsisten untuk sentuhan dan mencegah auto-zoom iOS. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select {
        min-height: 44px;
    }

    textarea {
        min-height: 7rem;
    }

    body > main.max-w-4xl {
        padding: 1.5rem 1rem;
    }

    body > main.max-w-4xl > article {
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .prose {
        overflow-wrap: anywhere;
    }

    .prose img,
    .prose video,
    .prose iframe {
        max-width: 100%;
        height: auto;
    }

    .prose table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    #alur-pemesanan {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }
}


/* Aksi kartu produk homepage: tetap sejajar pada grid 4 kolom yang lebih sempit. */
#product-grid .home-product-actions {
    gap: 0.375rem;
}

#product-grid .home-product-actions > a,
#product-grid .home-product-actions > div > a,
#product-grid .home-product-actions > div > button {
    flex-shrink: 0;
    white-space: nowrap;
}

#product-grid .home-product-actions > div {
    gap: 0.375rem;
}

@media (max-width: 639px) {
    /* Override aturan mobile generik: aksi home tetap satu baris, tanpa tumpang tindih. */
    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between.home-product-actions {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.375rem;
    }

    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between.home-product-actions > a,
    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between.home-product-actions > div {
        width: auto;
        min-width: 0;
    }

    #product-grid .product-card .pt-4.border-t.flex.items-center.justify-between.home-product-actions > div {
        justify-content: flex-end;
        gap: 0.375rem;
    }
}


/* Rich-text formatting produced by the CMS editor (articles, pages, product descriptions). */
.prose .ql-align-center, .product-desc .ql-align-center { text-align: center; }
.prose .ql-align-right, .product-desc .ql-align-right { text-align: right; }
.prose .ql-align-justify, .product-desc .ql-align-justify { text-align: justify; }
.prose .ql-indent-1, .product-desc .ql-indent-1 { padding-left: 3em; }
.prose .ql-indent-2, .product-desc .ql-indent-2 { padding-left: 6em; }
.prose .ql-indent-3, .product-desc .ql-indent-3 { padding-left: 9em; }
.prose .ql-font-serif, .product-desc .ql-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.prose .ql-font-monospace, .product-desc .ql-font-monospace { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.prose .ql-font-arial, .product-desc .ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.prose .ql-font-georgia, .product-desc .ql-font-georgia { font-family: Georgia, serif; }
.prose .ql-font-times-new-roman, .product-desc .ql-font-times-new-roman { font-family: 'Times New Roman', serif; }
.prose .ql-font-tahoma, .product-desc .ql-font-tahoma { font-family: Tahoma, sans-serif; }
.prose .ql-font-verdana, .product-desc .ql-font-verdana { font-family: Verdana, sans-serif; }
.prose .ql-font-helvetica, .product-desc .ql-font-helvetica { font-family: Helvetica, Arial, sans-serif; }
.prose .ql-size-small, .product-desc .ql-size-small { font-size: 0.75em; }
.prose .ql-size-large, .product-desc .ql-size-large { font-size: 1.5em; }
.prose .ql-size-huge, .product-desc .ql-size-huge { font-size: 2.5em; }
.prose .ql-align-center img, .product-desc .ql-align-center img { margin-left: auto; margin-right: auto; }
.prose .twse-table-embed, .product-desc .twse-table-embed { display: block; max-width: 100%; overflow-x: auto; margin: 1rem 0; }
.prose table, .product-desc table { width: 100%; border-collapse: collapse; margin: 0; }
.prose .twse-table-embed table, .product-desc .twse-table-embed table { min-width: 280px; table-layout: auto; }
.prose th, .prose td, .product-desc th, .product-desc td { border: 1px solid #cbd5e1; padding: 0.65rem 0.8rem; text-align: left; vertical-align: top; }
.prose th, .product-desc th { background: #f8fafc; font-weight: 700; }
.prose blockquote, .product-desc blockquote { border-left: 4px solid #10b981; margin: 1rem 0; padding: 0.5rem 1rem; background: #f8fafc; color: #475569; }
.prose pre.ql-syntax, .product-desc pre.ql-syntax { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: 0.75rem; overflow-x: auto; }
.prose .ql-video, .product-desc .ql-video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
    .prose table, .product-desc table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }
    .prose .ql-indent-2, .product-desc .ql-indent-2 { padding-left: 2em; }
    .prose .ql-indent-3, .product-desc .ql-indent-3 { padding-left: 2.5em; }
}