/* =========================================================================
   Parv Gifting — responsive.css
   Media queries ONLY. Desktop-first, max-width, descending:
   1600 → 1280 → 1024 → 768 → 480
   ========================================================================= */

/* ============================ 1600px ================================== */
@media (max-width: 1600px) {
  :root { --gutter: var(--space-5); }

  /* Direct child only — without the > this also sized the nested lists to
     the full viewport width, which blew the panel's grid apart. */
  .site-header .mega > .sub-menu { width: calc(100vw - var(--space-5) * 2); }
}

/* ============================ 1280px ================================== */
@media (max-width: 1280px) {
  :root {
    --section-padding: var(--space-7);
    --header-height: 96px;
  }

  .split-panel { min-height: 600px; }
  .split-panel .panel-body { padding: var(--space-6) var(--space-5); }

  .site-header .main-nav ul { gap: var(--space-5); }
  .site-header .header-inner { padding-inline: var(--space-4); }
  .site-header .mega > .sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .site-header .main-nav .mega .menu-promo { display: none; }

  .about-editorial .container { gap: var(--space-6); }

  .carousel.peek { --per-view: 4; }

  .instagram-feed .feed-grid { grid-template-columns: repeat(4, 1fr); }

  .floating-sticker img { width: 190px; top: -110px; }
}

/* ============================ 1024px ================================== */
@media (max-width: 1024px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .credit-legal { gap: var(--space-2) var(--space-4); }

  /* The filter panel stops being a sidebar and becomes a collapsible block. */
  .listing { grid-template-columns: minmax(0, 1fr); }
  .filter-panel { position: static; }

  :root { --header-height: 72px; }

  /* --- Navigation becomes an off-canvas panel — same <ul>, restyled --- */
  .site-header .nav-toggle { display: grid; }

  .site-header .header-cta {
    width: var(--tap-target);
    height: var(--tap-target);
    min-height: 0;
    padding: 0;
    border-radius: var(--radius-full);
  }

  .site-header .header-cta .cta-label { display: none; }
  .site-header .social-list { display: none; }
  .site-header .header-icon:not(.accent) { display: none; }


  /* The caret is a desktop affordance; mobile gets the injected toggle button. */
  .main-nav .menu > .menu-item-has-children > a::after { content: none; }

  .site-header .main-nav {
    position: fixed;
    inset: calc(var(--announcement-height) + var(--header-height)) 0 0 auto;
    z-index: 55;
    width: min(420px, 88vw);
    padding: var(--space-5);
    background: var(--color-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform var(--transition-slow);
  }

  .site-header .main-nav.open { transform: none; }

  .site-header .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .site-header .main-nav li { display: flex; flex-wrap: wrap; align-items: center; }
  .site-header .main-nav li + li { border-top: var(--border-hairline); }
  .site-header .main-nav a { flex: 1; padding: var(--space-3) 0; font-size: var(--fs-body); }

  .site-header .main-nav .submenu-toggle { display: grid; }

  .site-header .main-nav .mega { position: relative; }

  /* Every sub-menu — plain dropdown, mega panel and its nested lists — becomes
     the same accordion. NOTE: grid-template-rows 0fr collapses only the FIRST
     row, so a five-item <ul> left items 2..n open and overlapping. max-height
     collapses the whole list. */
  .site-header .main-nav .sub-menu,
  .site-header .mega > .sub-menu,
  .mega .sub-menu .sub-menu {
    position: static;
    left: auto;
    right: auto;
    width: 100%;
    min-width: 0;
    padding: 0;
    background: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition);
  }
  .site-header .main-nav .sub-menu a { padding-left: var(--space-4); }
  .mega .sub-menu .menu-item-has-children > a { padding-top: var(--space-3); }

  .site-header .main-nav .menu-item-has-children.open > .sub-menu {max-height: 90vh;max-height: 100% !important;}
  .site-header .main-nav .sub-menu a { padding-left: var(--space-4); }
  .mega .sub-menu .menu-item-has-children > a { padding-top: var(--space-3); }
  .site-header .mega > .sub-menu { justify-content: stretch; }

  .site-header .main-nav .menu-cta a {
    margin-block: var(--space-3);
    padding: var(--space-3) var(--space-5);
    text-align: center;
  }

  /* --- Layout --- */
  .split-panel,
  .split-panel.reverse { grid-template-columns: 1fr; min-height: 0; }
  .split-panel .panel-media { aspect-ratio: 4 / 3; }
  .split-panel.reverse .panel-media { order: 0; }

  /* Stacked, the hero still fills exactly one screen: media on top, words
     beneath, sharing the same height budget. */
  /* Stacked, the hero still fills exactly one screen and no more: a fixed
     height budget split between media and words, with the media allowed to
     shrink rather than the panel allowed to grow. */
  .hero .split-panel {
    height: calc(100svh - var(--announcement-height) - var(--header-height));
    min-height: 0;
    grid-template-rows: minmax(0, 44%) minmax(0, 1fr);
  }
  .hero .split-panel .panel-media { aspect-ratio: auto; min-height: 0; }
  .hero .panel-body { padding-block: var(--space-4); overflow: hidden; }

  .about-editorial .container { grid-template-columns: 1fr; gap: var(--space-5); }

  .product-detail { grid-template-columns: 1fr; gap: var(--space-6); }
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .contact-layout .contact-media { aspect-ratio: 4 / 3; }
  .image-banner { min-height: 340px; }
/*   .about-editorial .about-media { aspect-ratio: 4 / 3; } */
.about-editorial .about-media { aspect-ratio: 1 / 1; }

  .carousel.peek { --per-view: 3; }
  .carousel.peek.roomy { --per-view: 2; }

  .marquee.marquee-wave text { font-size: 34px; letter-spacing: 4px; }

  .row.four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row.three-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .quick-link { grid-template-columns: 96px 1fr; }
  .quick-link .media { width: 96px; }
  .quick-link .cta { grid-column: 2; }

  .floating-sticker { display: none; }

  .newsletter-dialog .dialog-inner { grid-template-columns: 1fr; }
  .newsletter-dialog .dialog-media { display: none; }

  .email-capture { background-attachment: scroll; }

  .promo-sticker { width: 120px; height: 120px; font-size: var(--fs-body); }
}

/* ============================ 768px =================================== */
@media (max-width: 768px) {
  .site-form .form-row { grid-template-columns: minmax(0, 1fr); }

  .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); }

  .listing-bar { flex-direction: column; align-items: stretch; }
  .listing-bar .form-group { min-width: 0; }

  :root {
    --gutter: var(--space-3);
    --section-padding: var(--space-6);
    --announcement-height: 68px;   /* the message needs two lines at this width */
  }

  .announcement-bar .announcement-rotator { gap: var(--space-2); width: 100%; }
  .announcement-bar .rotator-messages { min-width: 0; }

  .announcement-bar .rotator-messages p {
    font-size: var(--fs-body);
    line-height: 1.35;
  }

  .site-header .header-inner { padding-inline: var(--space-3); }

  .site-header .site-logo img { height: 44px; }
  .site-header .header-utils { gap: 0; }

  .announcement-bar .social-list { display: none; }
  .announcement-bar .container { grid-template-columns: auto 1fr auto; }

  .split-panel .panel-body { padding: var(--space-6) var(--space-4); }

  .carousel.peek { --per-view: 2; }
  .carousel.peek.roomy { --per-view: 1; }
  .carousel-btn { width: 40px; height: 40px; }

  .row.two-up { grid-template-columns: minmax(0, 1fr); }

  .testimonial-card { padding: var(--space-5); }

  .enquiry-form { padding: var(--space-4); }
  .site-form .form-row,
  .enquiry-form .form-row { grid-template-columns: minmax(0, 1fr); }
  .product-gallery .gallery-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .whatsapp-fab { right: var(--space-3); width: 52px; height: 52px; }

  .instagram-feed .feed-grid { grid-template-columns: repeat(3, 1fr); }
  .instagram-feed .feed-header { flex-direction: column; text-align: center; }

  .site-footer .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer .footer-logo { order: -1; }

  .credit-bar .container { justify-content: center; text-align: center; }

  .countdown { gap: var(--space-3); }
  .countdown div { min-width: 60px; }



  /* Narrower screen, fewer bumps — keep them the same shape, just smaller. */
  .scallop-divider { height: 28px; background-size: 84px 28px; }

  .promo-sticker { left: var(--space-3); bottom: var(--space-4); width: 100px; height: 100px; }
  .promo-sticker { font-size: var(--fs-small); }
  .back-to-top { right: var(--space-3); bottom: var(--space-4); }
}

/* ============================ 600px ===================================
   One column. Two cards side by side below this leaves each about 170px
   wide — the photographs stop reading and titles wrap to three lines.     */
@media (max-width: 600px) {
  /* Short phones: the hero's text half is only about 250px tall, so the
     headline is sized to fit it rather than being cut off. */
  .hero .panel-body .heading { font-size: clamp(1.5rem, 4.6vw + 0.6rem, 2rem); }
  .hero .panel-body .heading em { font-size: clamp(2rem, 7vw + 0.4rem, 2.75rem); }
  .hero .panel-body { gap: var(--space-3); }

  .lightbox[open] { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) var(--space-3); }
  .lightbox-figure { grid-column: 1; }
  .lightbox-nav { position: absolute; bottom: var(--space-5); }
  .lightbox-nav.prev { left: var(--space-4); }
  .lightbox-nav.next { right: var(--space-4); }

  .site-form .form-actions,
  .enquiry-actions { grid-template-columns: minmax(0, 1fr); }
  .email-dialog-body { padding: var(--space-5) var(--space-4); }

  .row.two-up,
  .row.three-up,
  .row.four-up,
  .row.four-up.stat-row,
  .listing .row { grid-template-columns: minmax(0, 1fr); }

  .carousel.peek,
  .carousel.peek.roomy { --per-view: 1; }

  .filter-chips { justify-content: flex-start; }
}

/* ============================ 480px =================================== */
@media (max-width: 480px) {
  .countdown { flex-wrap: nowrap; gap: var(--space-2); }
  .countdown div { min-width: 0; }
  .countdown .count { font-size: 1.75rem; }

  .btn { width: 100%; }

  /* The card button carries its own side margins, so a 100% width would push
     it past the card edge — 8px of horizontal scroll on every phone. */
  .product-card > .btn { width: auto; }
  .split-panel .panel-body .btn,
  .about-editorial .btn,
  .category-tile .btn { width: auto; }

  .site-form.inline .form-group { flex-direction: column; }
  .site-form.inline .btn { width: 100%; }

  .quick-link { grid-template-columns: 72px 1fr; gap: var(--space-3); }
  .quick-link .media { width: 72px; }

  .instagram-feed .feed-grid { grid-template-columns: repeat(2, 1fr); }

  .testimonial-card { padding: var(--space-4); }
  .testimonial-card figcaption { flex-wrap: wrap; }

  .promise-item img { width: 64px; height: 64px; }

  .marquee .marquee-track span { padding-inline: var(--space-4); font-size: var(--fs-body); }
  .marquee.marquee-wave text { font-size: 78px; letter-spacing: 10px; }

  .announcement-bar .rotator-btn { display: none; }
  .site-header .site-logo img { height: 40px; }
}


/* ==================== short phones (height-aware) =====================
   A 568px-tall phone gives the hero about 428px total. At the default
   44/56 split the words got 240px and needed 278. Height, not width, is
   the constraint here — so the query asks about height.                */
@media (max-width: 600px) and (max-height: 700px) {
  .hero .split-panel { grid-template-rows: minmax(0, 34%) minmax(0, 1fr); }
  .hero .panel-body { padding-block: var(--space-4); gap: var(--space-2); }
  .hero .panel-body .heading { font-size: 1.375rem; }
  .hero .panel-body .heading em { font-size: 1.875rem; }
  .hero .panel-body p { font-size: var(--fs-body); }
}