/* NR responsive layout. Load AFTER styles.css.
   Desktop rules are deliberately left alone above 1024px.
   Banners remain full-width images with left/right text overlays. */

@media (max-width: 1024px) {
  html {
    scroll-padding-top: 88px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body { min-width: 0; }
  .wrap { width: 100%; padding: 0 24px; }
  .wrap > *, .best-item, .footer-grid > * { min-width: 0; }

  /* Keep the logo truly centred and reserve room for all three icons. */
  .menubar-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0;
    padding: 10px 20px;
    width: 100%;
  }
  .burger {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  .logo-slot { grid-column: 2; grid-row: 1; }
  .logo-slot img { height: 52px; width: auto; }
  .nav-right {
    grid-column: 3;
    grid-row: 1;
    gap: 0;
    min-width: 0;
  }
  .nav-right button, .nav-right a {
    display: flex;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
  }
  .nav-right svg { width: 19px; height: 19px; }

  /* Without JavaScript, the navigation is still reachable in a second row. */
  .nav-left {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-self: stretch;
    gap: 0 16px;
    padding-top: 10px;
  }
  .nav-left a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 16px;
  }
  .nav-left a::after { display: none; }
  .menubar.mobile-menu-ready .nav-left { display: none; }
  .menubar.mobile-menu-ready.is-menu-open .nav-left {
    display: grid;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 12px 20px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.06);
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .nav-left a:hover { background: var(--paper-alt); }

  /* Keep the text beside the logo in the existing hero video. */
  .hero {
    min-height: 280px;
    max-height: none;
    aspect-ratio: 2048 / 625;
    align-items: center;
  }
  .hero video { object-position: 14% center; }
  .hero-content {
    width: 100%;
    max-width: none;
    padding: 30px 24px;
    margin: 0;
    min-width: 0;
  }
  .hero-copy {
    margin-left: 24%;
    width: 76%;
    max-width: 560px;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
  }
  .hero-tagline {
    width: 100%;
    max-width: 100%;
    font-size: clamp(28px, 3.8vw, 38px);
    line-height: 1.14;
    margin-bottom: 28px;
    overflow-wrap: break-word;
  }
  .hero-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 44px;
    padding: 12px 20px;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
  }

  /* Full mobile banners: keep every edge of the original image visible.
     Image and copy share ONE grid cell; this is still an overlay banner.
     The image keeps its original proportions, while the copy can make the
     row taller when needed. Extra space is preferable to cropping artwork
     or shrinking the paragraph to an unreadable size. */
  .full-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    height: auto;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .full-banner > img {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    align-self: center;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .full-banner .banner-copy {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    padding: 30px 24px;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    will-change: auto;
  }
  .full-banner .banner-copy.align-left {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .full-banner .banner-copy.align-right {
    justify-content: flex-end !important;
    text-align: right !important;
  }
  .full-banner .banner-copy.align-left.dark-text {
    background: linear-gradient(90deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.62) 40%, rgba(255,255,255,0) 70%) !important;
  }
  .full-banner .banner-copy.align-right.dark-text {
    background: linear-gradient(270deg, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.70) 40%, rgba(255,255,255,0) 70%) !important;
  }
  .full-banner .banner-copy.align-right.light-text {
    background: linear-gradient(270deg, rgba(20,18,18,0.58) 0%, rgba(20,18,18,0.58) 40%, rgba(20,18,18,0) 70%) !important;
  }
  .full-banner .banner-copy .copy-inner {
    min-width: 0;
    width: 54%;
    max-width: 470px;
    margin: 0 !important;
  }
  .banner-copy .eyebrow-plain {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 8px;
    overflow-wrap: break-word;
  }
  .banner-copy h3 {
    font-size: clamp(28px, 3.8vw, 36px);
    line-height: 1.18;
    margin-bottom: 12px;
    overflow-wrap: break-word;
  }
  .banner-copy p {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .banner-copy .price-tag { font-size: 18px; margin-bottom: 16px; }
  .banner-copy .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }

  /* Separate mobile visibility state avoids the desktop observer's threshold. */
  .nr-mobile-ready .full-banner .banner-copy {
    opacity: 0 !important;
    pointer-events: none;
  }
  .nr-mobile-ready .full-banner .banner-copy.align-left {
    transform: translateX(-24px) !important;
  }
  .nr-mobile-ready .full-banner .banner-copy.align-right {
    transform: translateX(24px) !important;
  }
  .nr-mobile-ready .full-banner .banner-copy.is-mobile-visible,
  .nr-mobile-ready .full-banner .banner-copy:focus-within {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }

  .section-head { padding: 42px 0; }
  .section-head h2 {
    font-size: clamp(26px, 3.8vw, 34px);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: 0.02em;
    overflow-wrap: break-word;
  }
  .section-head h2 b { font-weight: inherit; }

  /* Same product design, with a narrower grid and room for both actions. */
  .bestsellers { padding: 48px 0; }
  .best-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 12px;
  }
  .best-grid > .best-item:not(:first-child)::before {
    left: -16px;
    right: auto;
    top: 0;
    bottom: 0;
    height: auto;
    width: 1px;
  }
  .best-media { width: 100%; }
  .best-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .best-name {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.4;
  }
  .best-price { font-size: 16px; margin-bottom: 16px; }
  .product-actions, .scroll-row .product-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    gap: 8px;
    align-items: stretch;
  }
  .product-actions .best-cta, .product-actions .buy-now-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 6px;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.01em;
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Only the product rail scrolls sideways, never the whole page. */
  .shop-strip { padding: 48px 0; }
  .scroll-wrap { min-width: 0; gap: 12px; }
  .scroll-row {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    gap: 24px;
    padding: 4px 4px 14px;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  .scroll-row .best-item {
    flex: 0 0 240px;
    width: 240px;
    min-width: 0;
    max-width: 240px;
    scroll-snap-align: start;
  }
  .scroll-row .best-item:not(:first-child)::before {
    left: -12px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
  }
  .scroll-arrow { width: 44px; min-width: 44px; height: 64px; }

  .newsletter { padding: 44px 0; }
  .newsletter h3 {
    font-size: clamp(22px, 3.5vw, 27px);
    line-height: 1.25;
    margin-bottom: 22px;
  }
  .subscribe-form { width: 100%; min-width: 0; }
  .subscribe-form input {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    font-size: 16px;
    padding: 14px 16px;
    font-family: inherit;
  }
  .subscribe-form button {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 14px;
  }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .trust-item { min-width: 0; }
  .payment-icons { flex-wrap: wrap; gap: 20px; }
  .payment-icons img {
    flex: 0 1 auto;
    max-width: calc((100% - 40px) / 3);
    height: 42px;
    object-fit: contain;
  }
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .footer-grid p, .footer-grid a { overflow-wrap: anywhere; }
  .social-row { flex-wrap: wrap; gap: 8px; }
  .social-row a { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; }
  .social-row svg { width: 28px; height: 28px; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 20px; }
  .best-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    row-gap: 36px;
  }
  .best-grid > .best-item:not(:first-child)::before {
    left: 0;
    right: 0;
    top: -18px;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .best-grid .best-rank { font-size: 18px; margin-bottom: 14px; }
  .best-grid .best-name { min-height: 0; }
  .best-grid .product-actions .best-cta,
  .best-grid .product-actions .buy-now-cta { font-size: 14px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-grid p, .footer-grid a { font-size: 16px; }
  .footer-grid a { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 80px; }
  .wrap { padding: 0 16px; }
  .menubar-inner { padding: 8px 12px; }
  .logo-slot img { height: 48px; }

  /* Remove the old tall portrait hero and fixed 220px text offset. */
  .hero { aspect-ratio: auto; min-height: 220px; }
  .hero-content { padding: 24px 16px; }
  .hero-copy { width: 66%; max-width: none; margin-left: 34%; }
  .hero-tagline {
    font-size: clamp(22px, 5.6vw, 30px);
    line-height: 1.14;
    margin-bottom: 24px;
  }
  .hero-content .btn { font-size: 13px; padding: 11px 14px; letter-spacing: 0.02em; }

  .section-head { padding: 32px 0; }
  .section-head h2 { font-size: clamp(24px, 5.7vw, 30px); }

  .full-banner { min-height: 0; }
  .full-banner .banner-copy { padding: 24px 16px; }
  .full-banner .banner-copy .copy-inner { width: 62%; max-width: none; }
  .banner-copy .eyebrow-plain { font-size: 13px; line-height: 1.4; }
  .banner-copy h3 { font-size: clamp(23px, 5.7vw, 30px); }
  .banner-copy p { font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
  .banner-copy .price-tag { font-size: 17px; margin-bottom: 14px; }
  .banner-copy .btn { font-size: 13px; padding: 10px 12px; letter-spacing: 0.01em; }

  .bestsellers, .shop-strip { padding: 40px 0; }
  .best-media { margin-bottom: 18px; }
  .scroll-arrow { display: none; }
  .scroll-row .best-item {
    flex-basis: clamp(220px, 72vw, 280px);
    width: clamp(220px, 72vw, 280px);
    max-width: none;
  }
  .trust-strip { padding: 32px 0; }
  .trust-item { font-size: 14px; line-height: 1.5; }
  .trust-item img { width: 40px; height: 40px; }
  .payments { padding: 32px 0; }
  .payments .label { font-size: 20px; line-height: 1.3; }
  .payment-icons img { height: 36px; }
  footer { padding: 40px 0 calc(80px + env(safe-area-inset-bottom, 0px)); }
  .copyright { font-size: 12px; line-height: 1.6; }
  .whatsapp-float {
    width: 48px;
    height: 48px;
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .whatsapp-float svg { width: 26px; height: 26px; }
}

@media (max-width: 359px) {
  .nav-right button, .nav-right a { flex-basis: 40px; width: 40px; }
  .nav-right svg { width: 18px; height: 18px; }
  .subscribe-form input { padding-right: 10px; padding-left: 12px; }
  .subscribe-form button { padding-right: 12px; padding-left: 12px; }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .hero-tagline,
  .nr-mobile-ready .full-banner .banner-copy,
  .nr-mobile-ready .full-banner .banner-copy.align-left,
  .nr-mobile-ready .full-banner .banner-copy.align-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    pointer-events: auto;
  }
}

/* ==========================================================
   COMPACT PHONE LAYOUT
   Keeps the existing desktop design. These rules only refine
   phone-sized screens so banner copy, bestsellers and products
   scale cleanly inside the viewport.
   ========================================================== */
@media (max-width: 700px) {
  /* ---- Collection banners ----
     Keep the full artwork visible and overlay the copy without
     allowing the wording to make the banner itself taller. */
  .full-banner {
    position: relative;
    display: block;
    width: 100%;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  .full-banner > img {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .full-banner .banner-copy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: clamp(10px, 3.1vw, 16px);
  }

  .full-banner .banner-copy .copy-inner {
    width: 52%;
    max-width: 52%;
    min-width: 0;
    margin: 0 !important;
  }

  .full-banner .banner-copy.align-left .copy-inner {
    margin-right: auto !important;
  }

  .full-banner .banner-copy.align-right .copy-inner {
    margin-left: auto !important;
  }

  .banner-copy .eyebrow-plain {
    font-size: clamp(9px, 2.55vw, 12px);
    line-height: 1.25;
    margin-bottom: clamp(3px, 1vw, 6px);
  }

  .banner-copy h3 {
    font-size: clamp(17px, 5vw, 23px);
    line-height: 1.08;
    margin-bottom: clamp(5px, 1.5vw, 9px);
  }

  .banner-copy p {
    font-size: clamp(9.5px, 2.55vw, 12px);
    line-height: 1.32;
    margin-bottom: clamp(6px, 1.7vw, 10px);
  }

  .banner-copy .price-tag {
    font-size: clamp(11px, 3vw, 14px);
    line-height: 1.2;
    margin-bottom: clamp(6px, 1.5vw, 9px);
  }

  .banner-copy .btn {
    min-height: 0;
    padding: clamp(6px, 1.7vw, 8px) clamp(8px, 2.2vw, 12px);
    font-size: clamp(9px, 2.35vw, 11px);
    line-height: 1.2;
    letter-spacing: 0.01em;
  }

  /* ---- Our bestsellers ----
     One compact card at a time with the next card peeking in,
     so Top 1-3 can be reached by swiping sideways. */
  .bestsellers {
    padding: 34px 0 38px;
  }

  .bestsellers .section-head {
    padding-bottom: 24px;
  }

  .best-grid {
    display: flex !important;
    grid-template-columns: none !important;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 2px 2px 12px;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .best-grid > .best-item {
    flex: 0 0 clamp(195px, 62vw, 230px);
    width: clamp(195px, 62vw, 230px);
    max-width: clamp(195px, 62vw, 230px);
    min-width: 0;
    scroll-snap-align: start;
  }

  .best-grid > .best-item:not(:first-child)::before {
    left: -7px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 1px;
    height: auto;
  }

  .best-grid .best-rank {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .best-grid .best-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin-bottom: 10px;
  }

  .best-grid .best-name {
    min-height: 2.6em;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .best-grid .best-price {
    font-size: 13px;
    margin-bottom: 9px;
  }

  .best-grid .product-actions {
    gap: 6px;
  }

  .best-grid .product-actions .best-cta,
  .best-grid .product-actions .buy-now-cta {
    min-height: 36px;
    padding: 7px 4px;
    font-size: 10.5px;
    line-height: 1.15;
  }

  /* ---- Products rail ----
     Smaller cards so more of the next product is visible. */
  .shop-strip {
    padding: 34px 0 40px;
  }

  .shop-strip .section-head {
    padding-bottom: 24px;
  }

  .scroll-row {
    gap: 14px;
    padding: 2px 2px 12px;
    scroll-snap-type: x mandatory;
  }

  .scroll-row .best-item {
    flex: 0 0 clamp(170px, 52vw, 205px);
    width: clamp(170px, 52vw, 205px);
    max-width: clamp(170px, 52vw, 205px);
  }

  .scroll-row .best-media {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-bottom: 10px;
  }

  .scroll-row .best-name {
    min-height: 2.6em;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 6px;
  }

  .scroll-row .best-price {
    font-size: 13px;
    margin-bottom: 9px;
  }

  .scroll-row .product-actions {
    gap: 6px;
  }

  .scroll-row .product-actions .best-cta,
  .scroll-row .product-actions .buy-now-cta {
    min-height: 34px;
    padding: 6px 3px;
    font-size: 10px;
    line-height: 1.15;
  }

  .scroll-row .best-item:not(:first-child)::before {
    left: -7px;
  }

  /* A little extra breathing room on very narrow phones. */
  @media (max-width: 380px) {
    .full-banner .banner-copy .copy-inner {
      width: 54%;
      max-width: 54%;
    }

    .banner-copy p {
      font-size: 9px;
      line-height: 1.28;
    }

    .best-grid > .best-item {
      flex-basis: 190px;
      width: 190px;
      max-width: 190px;
    }

    .scroll-row .best-item {
      flex-basis: 165px;
      width: 165px;
      max-width: 165px;
    }
  }
}


/* ==========================================================
   BANNER COPY FIT - phone refinement
   Keeps all wording inside the original banner artwork and
   places the price beside the CTA.
   ========================================================== */
@media (max-width: 700px) {
  .full-banner .banner-copy {
    padding: clamp(8px, 2.2vw, 12px);
    overflow: hidden;
  }

  .full-banner .banner-copy .copy-inner {
    width: 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .full-banner .banner-copy.align-left .copy-inner {
    padding-right: clamp(4px, 1.2vw, 7px);
  }

  .full-banner .banner-copy.align-right .copy-inner {
    padding-left: clamp(4px, 1.2vw, 7px);
  }

  .banner-copy .eyebrow-plain {
    font-size: clamp(8px, 2.05vw, 10px);
    line-height: 1.18;
    margin-bottom: clamp(2px, .7vw, 4px);
  }

  .banner-copy h3 {
    font-size: clamp(16px, 4.3vw, 20px);
    line-height: 1.05;
    margin-bottom: clamp(4px, 1.05vw, 6px);
  }

  .banner-copy p {
    font-size: clamp(8.5px, 2.15vw, 10.5px);
    line-height: 1.24;
    margin-bottom: clamp(5px, 1.3vw, 7px);
  }

  .banner-copy .banner-actions {
    display: flex;
    align-items: center;
    gap: clamp(5px, 1.4vw, 8px);
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
  }

  .banner-copy.align-left .banner-actions {
    justify-content: flex-start;
  }

  .banner-copy.align-right .banner-actions {
    justify-content: flex-end;
  }

  .banner-copy.light-text .banner-actions .price-tag {
    color: var(--paper);
  }

  .banner-copy .banner-actions .price-tag {
    flex: 0 0 auto;
    margin: 0;
    font-size: clamp(10px, 2.55vw, 12px);
    line-height: 1.1;
    white-space: nowrap;
  }

  .banner-copy .banner-actions .btn {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    padding: clamp(5px, 1.3vw, 7px) clamp(7px, 1.7vw, 10px);
    font-size: clamp(8px, 2vw, 10px);
    line-height: 1.15;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .full-banner .banner-copy { padding: 7px; }
  .banner-copy .eyebrow-plain { font-size: 7.5px; }
  .banner-copy h3 { font-size: 15px; }
  .banner-copy p { font-size: 8px; line-height: 1.2; }
  .banner-copy .banner-actions .price-tag { font-size: 9.5px; }
  .banner-copy .banner-actions .btn { font-size: 7.5px; padding: 4px 6px; }
}