@media (max-width: 640px){
    html,
    body{
        overflow-x:hidden;
    }

    nav > div{
        padding:12px 14px 14px !important;
        align-items:center !important;
        flex-direction:column !important;
        gap:10px !important;
    }

    nav a.heading{
        font-size:15px !important;
        line-height:1.2 !important;
        letter-spacing:0.16em !important;
        white-space:normal !important;
    }

    nav div.flex.items-center{
        width:100% !important;
        gap:6px !important;
        justify-content:center !important;
        flex-wrap:nowrap !important;
        font-size:11px !important;
        letter-spacing:0.08em !important;
        padding:6px !important;
        background:rgba(255,255,255,0.64) !important;
        border:1px solid rgba(63,42,30,0.08) !important;
        box-shadow:0 8px 28px rgba(63,42,30,0.06) !important;
        overflow-x:auto !important;
        scrollbar-width:none;
    }

    nav div.flex.items-center::-webkit-scrollbar{
        display:none;
    }

    nav div.flex.items-center a{
        flex:1 0 auto !important;
        min-width:0 !important;
        text-align:center !important;
        padding:9px 10px !important;
        background:rgba(248,245,240,0.82) !important;
        border:1px solid rgba(63,42,30,0.08) !important;
        color:#3f2a1e !important;
        line-height:1 !important;
    }

    nav div.flex.items-center a.border-b{
        border:1px solid rgba(63,42,30,0.28) !important;
        background:#3f2a1e !important;
        color:#fff !important;
        padding-bottom:9px !important;
    }

    nav i.fa-bag-shopping{
        display:none !important;
    }

    .hero-bg{
        min-height:68vh !important;
        align-items:flex-start !important;
        background-position:center top !important;
    }

    .hero-bg > div{
        width:100% !important;
        padding:132px 22px 40px !important;
    }

    .hero-bg h1{
        max-width:330px !important;
        font-size:40px !important;
        line-height:1.06 !important;
        letter-spacing:0.12em !important;
        white-space:normal !important;
    }

    .hero-bg .script{
        font-size:34px !important;
        line-height:1.12 !important;
        margin-top:22px !important;
        margin-bottom:14px !important;
    }

    .hero-bg p:not(.script){
        font-size:15px !important;
        line-height:1.7 !important;
    }

    .hero-bg button{
        width:100% !important;
        max-width:290px !important;
        margin-top:30px !important;
        padding:14px 18px !important;
        font-size:11px !important;
        letter-spacing:0.18em !important;
    }

    .about-hero,
    .collection-hero,
    .detail-hero,
    .inquiry-hero{
        height:34vh !important;
        min-height:260px !important;
        margin-top:104px !important;
        background-position:center top !important;
    }

    main.max-w-7xl,
    main.max-w-6xl,
    main.max-w-5xl{
        margin-top:-62px !important;
        padding-left:14px !important;
        padding-right:14px !important;
        padding-bottom:56px !important;
    }

    .collection-card,
    .detail-card,
    .story-card,
    .inquiry-card{
        padding:28px 20px !important;
    }

    .section-title{
        font-size:11px !important;
        letter-spacing:0.24em !important;
        margin-bottom:14px !important;
    }

    .section-heading{
        font-size:32px !important;
        line-height:1.12 !important;
    }

    .body-text{
        font-size:15px !important;
        line-height:1.75 !important;
    }

    .collection-card .text-center.mb-20,
    .story-card .text-center.mb-24,
    .inquiry-card .text-center.mb-24{
        margin-bottom:42px !important;
    }

    .collection-card h1.mb-10,
    .inquiry-card h1.mb-10{
        margin-bottom:24px !important;
    }

    #collection{
        padding:60px 18px !important;
    }

    #collection .text-center.mb-16{
        margin-bottom:40px !important;
    }

    #categoryFilters{
        justify-content:flex-start !important;
        flex-wrap:nowrap !important;
        gap:16px !important;
        margin-bottom:42px !important;
        overflow-x:auto !important;
        padding-bottom:10px !important;
        scrollbar-width:none;
    }

    #categoryFilters::-webkit-scrollbar{
        display:none;
    }

    .filter-btn{
        flex:0 0 auto !important;
        font-size:10px !important;
        letter-spacing:0.16em !important;
        padding-bottom:6px !important;
    }

    #productsGrid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:34px 16px !important;
    }

    .product-image{
        margin-bottom:18px !important;
    }

    .product-card .space-y-4 > :not([hidden]) ~ :not([hidden]){
        margin-top:10px !important;
    }

    .product-meta,
    .product-price,
    .view-link{
        font-size:10px !important;
        line-height:1.5 !important;
        letter-spacing:0.14em !important;
    }

    .product-title{
        font-size:12px !important;
        line-height:1.45 !important;
        letter-spacing:0.12em !important;
    }

    .product-desc{
        display:none !important;
    }

    .text-center.pt-28,
    section.pt-28{
        padding-top:56px !important;
    }

    section.mt-28{
        margin-top:56px !important;
    }

    .detail-card > a{
        margin-bottom:28px !important;
    }

    .detail-card section.grid{
        gap:28px !important;
    }

    #productTitle{
        margin-bottom:22px !important;
    }

    #productDesc{
        margin-bottom:28px !important;
        font-size:15px !important;
        line-height:1.75 !important;
    }

    .detail-card .grid.grid-cols-2{
        grid-template-columns:1fr !important;
        gap:20px !important;
        padding-top:28px !important;
        padding-bottom:28px !important;
        margin-bottom:28px !important;
    }

    #thumbGrid{
        gap:10px !important;
    }

    .detail-btn{
        min-height:48px !important;
        padding:0 22px !important;
        font-size:11px !important;
        letter-spacing:0.18em !important;
    }

    .soft-panel{
        padding:24px !important;
    }

    .detail-card section.pt-28.mt-28{
        padding-top:56px !important;
        margin-top:56px !important;
    }

    .detail-card .grid.md\:grid-cols-3{
        gap:28px !important;
    }

    .form-input{
        padding:15px 0 !important;
    }

    form.space-y-14 > :not([hidden]) ~ :not([hidden]){
        margin-top:34px !important;
    }

    .submit-btn{
        width:100% !important;
        padding:15px 18px !important;
        font-size:11px !important;
        letter-spacing:0.2em !important;
    }

    footer{
        padding-top:34px !important;
        padding-bottom:34px !important;
    }

    .about-story-section{
        display:flex !important;
        flex-direction:column !important;
        gap:26px !important;
        margin-bottom:56px !important;
    }

    .about-story-section.border-t{
        padding-top:36px !important;
    }

    .about-journey-section .about-journey-image{
        order:-1 !important;
    }

    .about-story-image{
        width:calc(100% + 40px) !important;
        margin-left:-20px !important;
        margin-right:-20px !important;
        aspect-ratio:5/4 !important;
        box-shadow:none !important;
    }

    .about-story-image img{
        object-position:center !important;
    }

    .about-journey-image{
        aspect-ratio:16/11 !important;
    }

    .about-story-section h2{
        font-size:30px !important;
        line-height:1.14 !important;
    }

    .about-copy{
        max-width:none !important;
    }

    .about-copy.space-y-6 > :not([hidden]) ~ :not([hidden]){
        margin-top:0 !important;
    }

    .about-copy p{
        padding:16px 0 16px 16px !important;
        border-left:1px solid rgba(63,42,30,0.12) !important;
        line-height:1.72 !important;
    }

    .about-copy p:first-child{
        padding-top:0 !important;
    }

    .about-quote{
        padding:22px 20px !important;
        background:#fbfaf7 !important;
        border:1px solid rgba(63,42,30,0.06) !important;
        margin-top:4px !important;
    }

    .about-quote .w-16{
        margin-bottom:14px !important;
    }

    .about-quote .script{
        font-size:22px !important;
        line-height:1.35 !important;
    }

    .about-crystals-section,
    .about-impact-section{
        padding-top:50px !important;
        margin-top:50px !important;
    }

    .about-crystals-section .text-center.mb-16,
    .about-impact-section .text-center.mb-16{
        margin-bottom:30px !important;
    }

    .about-crystals-section h2,
    .about-impact-section h2{
        font-size:30px !important;
    }

    .about-crystal-grid{
        display:flex !important;
        gap:14px !important;
        overflow-x:auto !important;
        padding:2px 2px 12px !important;
        scroll-snap-type:x mandatory !important;
        scrollbar-width:none;
    }

    .about-crystal-grid::-webkit-scrollbar{
        display:none;
    }

    .about-crystal-grid > div{
        flex:0 0 72% !important;
        scroll-snap-align:start !important;
    }

    .about-crystal-grid .aspect-square{
        aspect-ratio:4/3 !important;
    }

    .about-impact-section .grid{
        gap:18px !important;
    }

    .about-impact-section .flex{
        padding:20px !important;
        background:#fbfaf7 !important;
        border:1px solid rgba(63,42,30,0.06) !important;
    }

    .about-impact-section .body-text{
        line-height:1.7 !important;
    }
}

@media (max-width: 768px){
    nav{
        background:rgba(255,255,255,0.92) !important;
        border-bottom:1px solid rgba(63,42,30,0.10) !important;
        box-shadow:0 10px 32px rgba(63,42,30,0.08) !important;
    }

    nav > div{
        padding:12px 14px 14px !important;
        align-items:center !important;
        flex-direction:column !important;
        gap:10px !important;
    }

    nav a.heading{
        display:block !important;
        width:100% !important;
        padding:2px 0 8px !important;
        text-align:center !important;
        font-size:15px !important;
        line-height:1.2 !important;
        letter-spacing:0.18em !important;
        border-bottom:1px solid rgba(63,42,30,0.08) !important;
    }

    nav div.flex.items-center{
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:7px !important;
        padding:7px !important;
        background:#f8f5f0 !important;
        border:1px solid rgba(63,42,30,0.12) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.8) !important;
        font-size:11px !important;
        letter-spacing:0.08em !important;
    }

    nav div.flex.items-center a{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:38px !important;
        padding:0 8px !important;
        text-align:center !important;
        background:#fff !important;
        border:1px solid rgba(63,42,30,0.13) !important;
        color:#3f2a1e !important;
        line-height:1 !important;
        box-shadow:0 4px 12px rgba(63,42,30,0.04) !important;
    }

    nav div.flex.items-center a.border-b{
        background:#3f2a1e !important;
        border-color:#3f2a1e !important;
        color:#fff !important;
        padding-bottom:0 !important;
        box-shadow:0 6px 16px rgba(63,42,30,0.16) !important;
    }

    nav div.flex.items-center i.fa-bag-shopping{
        display:none !important;
    }
}

@media (min-width: 641px) and (max-width: 900px){
    nav > div{
        padding-left:24px !important;
        padding-right:24px !important;
    }

    nav div.flex.items-center{
        gap:22px !important;
        letter-spacing:0.14em !important;
    }

    .section-heading{
        font-size:42px !important;
    }

    #productsGrid{
        gap:44px 24px !important;
    }
}