/* TORUNNO mobile-first commerce hero. Desktop layout is intentionally unaffected. */
@media (max-width: 700px) {
  .classic-hero {
    padding: 12px 0 13px !important;
    overflow: hidden;
  }
  /* Shop-first preset: keep text and product image together, rather than creating a long blog-style stack. */
  .classic-hero[class*="classic-hero-size-"].classic-hero-mobile-shop-first .classic-hero-inner,
  .classic-hero.classic-hero-centered.classic-hero-mobile-shop-first .classic-hero-inner {
    width: calc(100% - 24px) !important;
    max-width: 560px;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .82fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-copy {
    order: 0 !important;
    width: 100%; min-width: 0; max-width: none;
    padding: 0 !important; text-align: left !important;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-copy .classic-eyebrow {
    display: inline-block;
    font-size: 7px !important; line-height: 1.3;
    letter-spacing: .13em; margin: 0 0 7px !important;
    padding: 4px 6px; border: 1px solid color-mix(in srgb, var(--section-ink, var(--ink, #fff)) 20%, transparent);
    border-radius: 2px;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-copy h1 {
    max-width: 12ch; margin: 0 !important;
    font-size: clamp(24px, 7.5vw, 31px) !important;
    line-height: .98 !important; letter-spacing: -.045em !important;
    text-wrap: balance; overflow-wrap: anywhere;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-text {
    max-width: 31ch; margin: 8px 0 10px !important;
    font-size: clamp(10px, 2.9vw, 11.5px) !important;
    line-height: 1.42 !important;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-actions {
    display: flex; align-items: flex-start; flex-direction: column;
    gap: 6px !important; margin: 0 !important;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-actions .classic-button,
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-actions .btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto; max-width: 100%; min-height: 34px;
    padding: 9px 10px !important; font-size: 7px !important;
    line-height: 1.2; white-space: normal; text-align: center;
    letter-spacing: .055em;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-text-link { display: none !important; }
  .classic-hero.classic-hero-mobile-shop-first .classic-proof { display: none !important; }
  .classic-hero[class*="classic-hero-size-"].classic-hero-mobile-shop-first .classic-hero-image,
  .classic-hero[class*="classic-hero-size-"].classic-hero-mobile-shop-first .classic-hero-placeholder {
    order: 0 !important; width: 100%; min-width: 0; min-height: 0 !important;
    height: clamp(165px, 49vw, 205px) !important;
    aspect-ratio: 3 / 4; border-radius: 3px; overflow: hidden;
  }
  .classic-hero.classic-hero-size-compact.classic-hero-mobile-shop-first .classic-hero-image,
  .classic-hero.classic-hero-size-compact.classic-hero-mobile-shop-first .classic-hero-placeholder {
    height: clamp(145px, 42vw, 178px) !important;
  }
  .classic-hero.classic-hero-size-wide.classic-hero-mobile-shop-first .classic-hero-image,
  .classic-hero.classic-hero-size-wide.classic-hero-mobile-shop-first .classic-hero-placeholder {
    height: clamp(132px, 38vw, 158px) !important; aspect-ratio: 4 / 3;
  }
  .classic-hero.classic-hero-size-large.classic-hero-mobile-shop-first .classic-hero-image,
  .classic-hero.classic-hero-size-extra-large.classic-hero-mobile-shop-first .classic-hero-image,
  .classic-hero.classic-hero-size-large.classic-hero-mobile-shop-first .classic-hero-placeholder,
  .classic-hero.classic-hero-size-extra-large.classic-hero-mobile-shop-first .classic-hero-placeholder {
    height: clamp(175px, 51vw, 215px) !important;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 42%; }
  .classic-hero.classic-hero-mobile-shop-first .classic-image-caption {
    left: 6px !important; right: 6px !important; bottom: 6px !important;
    padding: 6px 7px !important; font-size: 5.5px !important; letter-spacing: .08em;
  }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-placeholder { padding: 12px !important; justify-content: center; }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-placeholder strong { font-size: 20px !important; line-height: 1; margin: 7px 0 !important; }
  .classic-hero.classic-hero-mobile-shop-first.classic-hero-image-left .classic-hero-copy,
  .classic-hero.classic-hero-mobile-shop-first.classic-hero-image-left .classic-hero-image { order: 0 !important; }
  .classic-hero.classic-hero-mobile-shop-first.classic-hero-centered .classic-hero-inner { text-align: left !important; }
  .classic-hero.classic-hero-mobile-shop-first.classic-hero-centered .classic-hero-actions { align-items: flex-start !important; }
  /* Optional mobile banner image: full-width, short, and deliberately landscape. */
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-inner {
    width: calc(100% - 28px) !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important;
  }
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-copy { order: 0 !important; padding: 0 !important; text-align: left !important; }
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-copy h1 { font-size: clamp(29px, 8.5vw, 38px) !important; line-height: 1 !important; max-width: 18ch; }
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-text { margin: 7px 0 9px !important; font-size: 11px !important; line-height: 1.45 !important; max-width: 58ch; }
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-actions { flex-direction: row !important; gap: 10px !important; align-items: center; }
  .classic-hero.classic-hero-mobile-wide-banner .classic-text-link { display: none !important; }
  .classic-hero.classic-hero-mobile-wide-banner .classic-proof { display: none !important; }
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-image,
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-placeholder {
    height: clamp(118px, 34vw, 150px) !important; min-height: 0 !important; width: 100%; aspect-ratio: 16 / 6; border-radius: 3px; overflow: hidden;
  }
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
  .classic-hero.classic-hero-mobile-wide-banner .classic-image-caption { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 6px 8px !important; font-size: 6px !important; }
  /* Optional stacked story layout, reduced in height compared with the old mobile layout. */
  .classic-hero.classic-hero-mobile-stacked .classic-hero-inner { width: calc(100% - 28px) !important; grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
  .classic-hero.classic-hero-mobile-stacked .classic-hero-copy { order: 0 !important; padding: 0 !important; }
  .classic-hero.classic-hero-mobile-stacked .classic-hero-copy h1 { font-size: clamp(31px, 9vw, 42px) !important; line-height: 1 !important; }
  .classic-hero.classic-hero-mobile-stacked .classic-hero-text { margin: 8px 0 10px !important; font-size: 11px !important; line-height: 1.5 !important; }
  .classic-hero.classic-hero-mobile-stacked .classic-text-link { display: none !important; }
  .classic-hero.classic-hero-mobile-stacked .classic-proof { display: none !important; }
  .classic-hero.classic-hero-mobile-stacked .classic-hero-image,
  .classic-hero.classic-hero-mobile-stacked .classic-hero-placeholder { height: clamp(135px, 38vw, 170px) !important; min-height: 0 !important; }
  .classic-trust-strip {
    width: calc(100% - 28px) !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important; padding: 8px 0 !important;
  }
  .classic-trust-strip div { display: flex; align-items: center; justify-content: center !important; gap: 3px; font-size: 6px !important; line-height: 1.25; text-align: center; }
  .classic-trust-strip span { font-size: 9px !important; flex: 0 0 auto; }
  .builder-section.classic-section { padding-top: 26px !important; padding-bottom: 26px !important; }
  .builder-section-heading { gap: 7px !important; }
  .builder-section .builder-title.classic-title { font-size: clamp(26px, 7.5vw, 34px) !important; line-height: 1.05 !important; }
  .builder-section .builder-copy.classic-copy { font-size: 11px !important; line-height: 1.45 !important; }
  .classic-product-grid { gap: 18px 10px !important; }
}
@media (max-width: 370px) {
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-inner { width: calc(100% - 20px) !important; gap: 8px !important; grid-template-columns: minmax(0,1.05fr) minmax(0,.78fr) !important; }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-copy h1 { font-size: clamp(23px, 7.1vw, 27px) !important; }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-text { font-size: 9.5px !important; }
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-actions .classic-button { min-height: 31px; padding: 8px !important; font-size: 6.5px !important; }
}
@media (prefers-reduced-motion: reduce) { .classic-hero .classic-hero-image img { transition: none !important; } }

/* TORUNNO viewport-fill refinement (Oct 2026): reclaim unused side space on desktop. */
@media (min-width: 701px) {
  :root { --classic-max: 2200px !important; }

  .nav-wrap,
  .container,
  .builder-container,
  .classic-hero-inner,
  .classic-trust-strip,
  .site-flash,
  .footer-top,
  .footer-bottom,
  .builder-section.classic-section .builder-container {
    width: calc(100% - clamp(48px, 5vw, 128px)) !important;
    max-width: 2200px !important;
  }

  .classic-hero-inner {
    gap: clamp(30px, 4.2vw, 82px) !important;
  }

  .classic-hero.classic-hero-size-wide .classic-hero-inner {
    grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr) !important;
  }

  .classic-hero-image img { object-position: center 31%; }

  /* Let section content follow the new full-width site canvas. */
  .builder-section-heading { gap: clamp(16px, 2vw, 32px); }
  .classic-product-grid { gap: clamp(14px, 1.8vw, 32px); }
}

/* Mobile: remove the long editorial paragraph and give its space to the hero image. */
@media (max-width: 700px) {
  .classic-hero {
    padding: 14px 0 13px !important;
  }

  .classic-hero .classic-hero-text {
    display: none !important;
  }

  .classic-hero.classic-hero-mobile-shop-first .classic-hero-inner {
    width: calc(100% - 18px) !important;
    max-width: none !important;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .classic-hero.classic-hero-mobile-shop-first .classic-hero-copy h1 {
    font-size: clamp(23px, 6.6vw, 30px) !important;
    line-height: .98 !important;
    max-width: 11ch !important;
    overflow-wrap: normal !important;
  }

  .classic-hero.classic-hero-mobile-shop-first .classic-hero-image,
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-placeholder {
    height: clamp(230px, 68vw, 300px) !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .classic-hero.classic-hero-size-compact.classic-hero-mobile-shop-first .classic-hero-image,
  .classic-hero.classic-hero-size-compact.classic-hero-mobile-shop-first .classic-hero-placeholder {
    height: clamp(210px, 61vw, 270px) !important;
  }

  .classic-hero.classic-hero-size-wide.classic-hero-mobile-shop-first .classic-hero-image,
  .classic-hero.classic-hero-size-wide.classic-hero-mobile-shop-first .classic-hero-placeholder {
    height: clamp(225px, 65vw, 285px) !important;
    aspect-ratio: 4 / 5 !important;
  }

  .classic-hero.classic-hero-mobile-shop-first .classic-hero-image img {
    object-fit: cover !important;
    object-position: center 30% !important;
  }

  .classic-hero.classic-hero-mobile-shop-first .classic-hero-copy .classic-eyebrow {
    font-size: 6.5px !important;
    margin-bottom: 6px !important;
  }

  .classic-hero.classic-hero-mobile-shop-first .classic-hero-actions {
    margin-top: 9px !important;
    gap: 6px !important;
  }

  .classic-hero.classic-hero-mobile-shop-first .classic-hero-actions .classic-button,
  .classic-hero.classic-hero-mobile-shop-first .classic-hero-actions .btn {
    min-height: 32px !important;
    padding: 8px 9px !important;
    font-size: 6.5px !important;
  }

  /* Wide-banner and stacked mobile options remain compact even with the paragraph hidden. */
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-inner,
  .classic-hero.classic-hero-mobile-stacked .classic-hero-inner {
    width: calc(100% - 24px) !important;
    max-width: none !important;
    gap: 9px !important;
  }

  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-image,
  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-placeholder {
    height: clamp(190px, 59vw, 275px) !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .classic-hero.classic-hero-mobile-stacked .classic-hero-image,
  .classic-hero.classic-hero-mobile-stacked .classic-hero-placeholder {
    height: clamp(220px, 66vw, 290px) !important;
    min-height: 0 !important;
  }

  .classic-hero.classic-hero-mobile-wide-banner .classic-hero-copy h1,
  .classic-hero.classic-hero-mobile-stacked .classic-hero-copy h1 {
    font-size: clamp(29px, 8.5vw, 38px) !important;
    line-height: 1 !important;
  }

  /* Keep the shopping sections close enough that products appear earlier on mobile. */
  .classic-trust-strip {
    width: calc(100% - 24px) !important;
    padding: 7px 0 !important;
  }
  .builder-section.classic-section { padding-top: 22px !important; padding-bottom: 22px !important; }
}


/* TORUNNO layout correction v20261020-2: these selectors target the actual storefront markup
   (the homepage hero does not require a special builder modifier class). */
@media (min-width: 701px) {
  :root { --classic-max: 1800px !important; }
  .nav-wrap,
  .container,
  .builder-container,
  .classic-hero-inner,
  .classic-trust-strip,
  .site-flash,
  .footer-top,
  .footer-bottom,
  .builder-section.classic-section .builder-container {
    width: calc(100% - clamp(40px, 7vw, 140px)) !important;
    max-width: 1800px !important;
  }
  .classic-hero-inner {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: clamp(28px, 4vw, 76px) !important;
  }
  .classic-hero-image,
  .classic-hero-placeholder {
    min-width: 0 !important;
  }
  .classic-product-grid,
  .builder-product-grid {
    gap: clamp(14px, 1.8vw, 30px) !important;
  }
}

/* Mobile shop-first layout: compact copy beside the image, with no long editorial paragraph. */
@media (max-width: 700px) {
  .classic-hero { padding: 13px 0 16px !important; overflow: hidden; }
  .classic-hero .classic-hero-inner {
    width: calc(100% - 22px) !important;
    max-width: none !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .classic-hero .classic-hero-copy { min-width: 0 !important; max-width: none !important; padding: 0 !important; text-align: left !important; }
  .classic-hero .classic-hero-copy h1 {
    max-width: 12ch !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: normal !important;
    margin: 0 !important;
  }
  .classic-hero .classic-hero-text,
  .classic-hero .classic-text-link,
  .classic-hero .classic-proof { display: none !important; }
  .classic-hero .classic-eyebrow { font-size: 6.5px !important; line-height: 1.25 !important; margin: 0 0 7px !important; letter-spacing: .1em !important; }
  .classic-hero .classic-hero-actions { margin: 10px 0 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 7px !important; }
  .classic-hero .classic-hero-actions .classic-button,
  .classic-hero .classic-hero-actions .btn {
    width: 100% !important; min-height: 34px !important; padding: 9px 7px !important;
    font-size: 7px !important; line-height: 1.2 !important; text-align: center !important;
    justify-content: center !important; white-space: normal !important;
  }
  .classic-hero .classic-hero-image,
  .classic-hero .classic-hero-placeholder {
    width: 100% !important; height: clamp(225px, 66vw, 300px) !important;
    min-height: 0 !important; aspect-ratio: 3 / 4 !important;
    overflow: hidden !important; margin: 0 !important;
  }
  .classic-hero .classic-hero-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 30% !important; display: block !important; }
  .classic-hero .classic-image-caption { left: 5px !important; right: 5px !important; bottom: 5px !important; padding: 5px !important; font-size: 5.5px !important; }
  .classic-trust-strip { width: calc(100% - 22px) !important; gap: 4px !important; padding: 7px 0 !important; }
  .classic-trust-strip div { gap: 3px !important; font-size: 6px !important; letter-spacing: 0 !important; }
  .builder-section.classic-section { padding-block: 20px !important; }
  .builder-section.classic-section .builder-container { width: calc(100% - 22px) !important; }
  .classic-hero + .classic-trust-strip { margin-bottom: 0 !important; }
}
@media (max-width: 360px) {
  .classic-hero .classic-hero-inner { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr) !important; width: calc(100% - 16px) !important; gap: 7px !important; }
  .classic-hero .classic-hero-copy h1 { font-size: 22px !important; }
  .classic-hero .classic-hero-image,
  .classic-hero .classic-hero-placeholder { height: 220px !important; }
  .classic-hero .classic-hero-actions .classic-button,
  .classic-hero .classic-hero-actions .btn { font-size: 6.5px !important; }
}