/* ==========================================================
   OFFKEY® — responsive.css
   ========================================================== */

@media (max-width: 1200px) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer-top { grid-template-columns: 1fr 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
    .co-grid { grid-template-columns: 1fr; }
    .co-summary { order: -1; }
    .main-nav { display: none; }
    .why-card { grid-template-columns: auto 1fr; }
    .wc-pic { display: none; }
    .story { grid-template-columns: 1fr; }
    .story-pics { max-width: 560px; }
    .numbers { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: 1fr 1fr; }
    .contact { grid-template-columns: 1fr; }
    .menu-pic { display: none; }
}

/* ----- Tablet / mobile: horizontal sections native swipe ban jate hain ----- */
@media (max-width: 899px) {
    :root { --header-h: 72px; }

    .hero { padding-top: calc(var(--header-h) + 10px); }
    .hero-top { flex-direction: column; gap: 6px; }
    .hero-meta.right { display: none; }
    .hero-title { margin: 32vh 0 auto; font-size: 17vw; }
    .hp-1 { width: 38vw; left: 4%;  top: 15%; }
    .hp-3 { width: 34vw; right: 5%; top: 13%; }
    .hp-5 { width: 26vw; left: 40%; top: 27%; }
    .hp-2 { width: 27vw; left: 6%;  top: 55%; }
    .hp-4 { width: 23vw; right: 8%; top: 57%; }
    .hp figcaption { font-size: 9px; padding: 2px 8px; }
    .hero-scribble { display: none; }
    .hero-bottom { flex-wrap: wrap; align-items: center; }
    .hero-lead { width: 100%; }
    .spin-badge { width: 96px; }

    .marquee-zone { padding: 46px 0; }
    .marquee { padding: 12px 0; }
    .marquee-pink { margin-top: -26px; }

    .drop { padding: 90px 0 70px; }
    .drop-pin { height: auto; flex-direction: column; align-items: stretch; }
    .drop-head { position: static; transform: none; max-width: none; padding: 0 var(--pad); margin-bottom: 40px; }
    .drop-track {
        padding: 30px var(--pad) 40px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .drop-track::-webkit-scrollbar { display: none; }
    .drop-card { width: 72vw; scroll-snap-align: center; }
    .dc-media img { width: 100%; }
    .drop-progress { display: none; }

    .rw-left, .rw-right { right: auto; left: 50%; margin-left: -50vw; width: 100vw; text-align: center; }
    .rw-left  { top: 12%; }
    .rw-right { bottom: 12%; }

    .section-head { flex-direction: column; align-items: flex-start; }
    .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .why-card { min-height: 0; grid-template-columns: 1fr; gap: 16px; }
    .wc-num { font-size: 54px; }

    .gang { grid-template-columns: 1fr; }
    .gang-cols { gap: 10px; }
    .gang-col { gap: 10px; }
    .gang-col:nth-child(2) { margin-top: 50px; }

    .st-1 { width: 92px; height: 92px; font-size: 11px; left: 4%; top: 6%; }
    .st-2 { width: 66px; height: 66px; font-size: 32px; right: 5%; top: 5%; }
    .st-3 { font-size: 16px; right: 6%; bottom: 5%; }

    .pdp { grid-template-columns: 1fr; }
    .pdp-gallery { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .pdp-gallery figure { scroll-snap-align: start; }

    .lb-horizontal { padding: 90px 0; }
    .lb-pin { height: auto; }
    .lb-track { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; scrollbar-width: none; }
    .lb-track > * { scroll-snap-align: start; }
    .lb-shot img { width: 100%; }
    .lb-shot.small { align-self: center; margin-bottom: 0; }
    .lb-grid .g1, .lb-grid .g2, .lb-grid .g3, .lb-grid .g4 { grid-column: 1 / -1; margin-top: 0; }

    .footer-top { grid-template-columns: 1fr 1fr; }
    .ih-scroll { display: none; }
}

@media (max-width: 600px) {
    .header-actions .cart-btn span:first-child { display: none; }
    .header-actions { gap: 6px; }
    .cart-btn { padding: 0 6px; }
    .logo-word { font-size: 20px; }
    .btn-big { padding: 18px 28px; font-size: 14px; }
    .product-grid { gap: 28px 10px; }
    .pc-info { flex-direction: column; gap: 4px; padding-top: 10px; }
    .pc-info h3 { font-size: 12px; }
    .pc-color { font-size: 12px; }
    .pc-tag { font-size: 9px; top: 8px; left: 8px; padding: 4px 8px; }
    .values-grid { grid-template-columns: 1fr; }
    .numbers { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
    .num-item b { font-size: 11vw; }
    .field-row { grid-template-columns: 1fr; }
    .co-row, .co-row-3 { grid-template-columns: 1fr; }
    .perks { grid-template-columns: 1fr 1fr 1fr; }
    .perks div { padding: 10px; font-size: 11px; }
    .nl-form { flex-direction: column; border-radius: 26px; }
    .nl-form input { padding: 14px 16px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 34px 20px; padding-bottom: 40px; }
    .footer-top .footer-col:last-child { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; }
    .toast { font-size: 14px; }
}

/* ----- Bahut chhote phones (iPhone SE / 320–380px) ----- */
@media (max-width: 380px) {
    :root { --pad: 14px; }
    .logo-word { font-size: 17px; }
    .logo-star { width: 22px; height: 22px; }
    .logo { gap: 6px; }
    .header-actions { gap: 5px; }
    .cart-btn, .menu-btn { width: 42px; height: 42px; min-width: 42px; }
    .cart-btn { padding: 0; justify-content: center; }
    .cart-btn .cart-count { min-width: 28px; height: 28px; }
    .numbers { grid-template-columns: 1fr; }
}

/* ----- Tablet (600–899px): hero photos chhoti, title saaf dikhe ----- */
@media (min-width: 600px) and (max-width: 899px) {
    .hero-title { margin: 30vh 0 auto; font-size: 16vw; }
    .hp-1 { width: 24vw; left: 4%;  top: 15%; }
    .hp-3 { width: 22vw; right: 4%; top: 13%; }
    .hp-5 { width: 17vw; left: 41%; top: 17%; }
    .hp-2 { width: 19vw; left: 8%;  top: 58%; }
    .hp-4 { width: 16vw; right: 10%; top: 60%; }
    .hero-lead { width: auto; }
    .hero-bottom { flex-wrap: nowrap; align-items: flex-end; }
}

/* ----- Chhote / chhoti height wale phones: neeche ki 2 photos hata do ----- */
@media (max-width: 380px), (max-width: 899px) and (max-height: 700px) {
    .hp-2, .hp-4 { display: none; }
    .hero-title { margin-top: 26vh; }
}

@media (max-width: 600px) {
    .page-checkout .co-header-note span { display: none; }
    .co-steps { font-size: 11px; gap: 6px 12px; }
    .co-steps li + li::before { width: 10px; }
}

@media (max-width: 899px) { .oc-grid { grid-template-columns: 1fr; } }

@media (max-width: 600px) {
    .shop-tools { width: 100%; justify-content: space-between; gap: 12px; }
    .sort-wrap > span { display: none; }
    .sort-select { max-width: 100%; }
}