@use "sass:math";
@media (hover: none) and (pointer: coarse) {
  * {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto !important; }

  /* CRITICAL FIX: Allow momentum scrolling - remove overscroll-behavior: none */
  html,
  body {
    -webkit-overflow-scrolling: touch;
    /* overscroll-behavior: none; - REMOVED: This was preventing momentum scrolling */ }

  /* Optimize for touch performance */
  .hero-section,
  .main-container,
  .fork-pasta-img-section {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); }

  /* FIXED: Ensure smooth wrapper doesn't interfere with native scrolling */
  #smooth-wrapper {
    overflow: visible !important;
    position: static !important;
    /* Changed from relative to static */
    -webkit-overflow-scrolling: touch; }

  /* Disable hover effects on actual touch devices */
  .nav-link:hover,
  .feature-box:hover,
  .nav-arrow:hover {
    transform: none !important; }

  /* FIXED: Simplified scroll handling for momentum */
  .hero-section {
    -webkit-overflow-scrolling: touch;
    overflow: visible; }

  /* Ensure smooth scrolling through pinned sections */
  [data-pin-spacer] {
    overflow: visible !important;
    -webkit-overflow-scrolling: touch !important; }

  /* FIXED: Simplified body scroll settings for momentum */
  body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: visible;
    /* Changed from auto to visible for better momentum */
    /* Remove touch-action restrictions that might interfere */
    touch-action: manipulation;
    /* Allow all touch gestures including momentum */ }

  /* FIXED: Remove will-change from sections to reduce interference */
  .hero-section,
  .main-container,
  .slider-section,
  .fork-pasta-img-section {
    -webkit-overflow-scrolling: touch;
    /* will-change: transform; - REMOVED: Can interfere with momentum scrolling */ }

  /* Ensure ScrollTrigger pins don't cause scroll locks */
  .pin-spacer {
    overflow: visible !important; } }
@media screen and (max-width: 1350px) {
  .navbar .nav-menu {
    display: none; } }
@media (max-width: 992px) {
  body,
  html {
    overflow-x: hidden !important; }

  .navbar .nav-container {
    padding: 0 40px; }
  .navbar .nav-menu {
    display: none; }

  .hero-section .hero-content {
    padding-top: 100px; }
  .hero-section .hero-container {
    padding: 0 20px; }
  .hero-section .hero-text .hero-title {
    min-width: unset;
    width: 100%; }
  .hero-section .hero-bucket {
    width: 90vw;
    max-width: 300px;
    height: auto;
    bottom: 0%;
    right: 10%; }
  .hero-section .floating-icons {
    position: absolute;
    top: 200px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%; }
    .hero-section .floating-icons .floating-icon.icon-mushroom {
      width: 55px;
      height: 55px;
      top: 8%;
      left: 50%;
      transform: translateX(-50%); }
    .hero-section .floating-icons .floating-icon.icon-mushroom-2, .hero-section .floating-icons .floating-icon.icon-mushroom-3 {
      display: none !important; }
    .hero-section .floating-icons .floating-icon.icon-pepper {
      display: none !important; }
    .hero-section .floating-icons .floating-icon.icon-pasta {
      width: 90px;
      height: 90px;
      top: 10%;
      right: 10%; }
    .hero-section .floating-icons .floating-icon.icon-farfalle {
      width: 70px;
      height: 70px;
      top: 12%;
      left: 4%; } }
@media (max-width: 768px) {
  .navbar {
    padding: 20px 0; }
    .navbar .nav-container {
      padding: 0 20px; }
    .navbar .nav-logo .logo-image {
      height: 52px; }
    .navbar .nav-menu-toggle {
      padding: 6px 8px; }
      .navbar .nav-menu-toggle .menu-text {
        font-size: 11px; } }
@media (max-width: 1312px) {
  .location-hours-section .location-info {
    padding-inline-start: 80px; } }
@media (max-width: 992px) {
  .container {
    padding-inline: 20px; }

  .main-container .container-fluid {
    padding: 0 20px; }

  .pasta-menu-slider {
    padding: 60px 0 100px 0; }
    .pasta-menu-slider .pasta-item {
      padding: 0 10px; }
      .pasta-menu-slider .pasta-item.active {
        transform: scale(1.05); }
      .pasta-menu-slider .pasta-item .pasta-description {
        max-width: 180px; }

  .why-love-it-section {
    padding: 60px 0; }
    .why-love-it-section .section-title {
      font-size: 36px;
      margin-bottom: 60px; }
    .why-love-it-section .feature-box {
      padding: 30px 20px;
      margin-bottom: 20px;
      height: calc(100% - 20px); }
    .why-love-it-section .feature-description {
      font-size: 14px; }

  .location-hours-section .contact-form-section {
    margin-top: 60px; }
    .location-hours-section .contact-form-section .contact-title {
      margin-bottom: 20px; }
    .location-hours-section .contact-form-section .contact-logo {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      top: calc(100% - 70px); }
      .location-hours-section .contact-form-section .contact-logo .logo-circle {
        display: none;
        width: 140px;
        height: 140px; }
  .location-hours-section .location-info {
    padding: 120px 20px;
    margin-bottom: 0;
    position: relative;
    min-height: unset; }
  .location-hours-section .location-title {
    margin-bottom: 40px; }
  .location-hours-section .map-container {
    height: 400px; }

  canvas {
    width: 200px;
    height: 200px; }

  .slider-section {
    height: auto; }
    .slider-section .slider-track {
      flex-direction: column;
      width: 100%;
      height: auto; }
      .slider-section .slider-track .slide {
        width: 100% !important;
        padding: 50px 20px; }
        .slider-section .slider-track .slide canvas {
          margin: 0;
          width: 100%;
          height: 100%;
          max-width: 400px; }
      .slider-section .slider-track .pasta-options .pasta-option img {
        max-width: 60px;
        height: 60px;
        margin-bottom: 20px; }

  .footer-section {
    padding: 40px 0 0 0; }
    .footer-section .footer-content .row {
      flex-direction: column-reverse;
      align-items: center;
      justify-content: center; }
    .footer-section .footer-content .footer-visual-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      padding-top: 40px; }
      .footer-section .footer-content .footer-visual-container > img {
        max-width: 175px;
        height: auto; }
      .footer-section .footer-content .footer-visual-container .footer-mascot-container {
        all: unset;
        max-width: 200px; }
        .footer-section .footer-content .footer-visual-container .footer-mascot-container canvas {
          max-width: 100%;
          height: auto; }
    .footer-section .footer-nav {
      margin-inline: auto;
      width: 100%;
      max-width: 500px; }
    .footer-section .footer-text {
      text-align: center;
      margin-bottom: 30px; }
      .footer-section .footer-text .footer-title {
        font-size: 36px;
        line-height: 1; }
    .footer-section .footer-mascot-container .footer-mascot {
      width: 200px;
      height: 200px; }
    .footer-section .footer-nav {
      align-items: center; }
      .footer-section .footer-nav .footer-link {
        font-size: 16px; }
    .footer-section .footer-bottom {
      margin-top: 40px;
      padding-block: 20px;
      text-align: center; }
      .footer-section .footer-bottom .copyright-text,
      .footer-section .footer-bottom .website-credit {
        text-align: center;
        margin-bottom: 10px; }
      .footer-section .footer-bottom .text-right {
        text-align: center; }

  .mascot-container .mascot-image {
    width: 200px; }

  .contact-form-section-popup .contact-form-popup {
    padding: 40px 30px;
    max-width: 600px; }
  .contact-form-section-popup .contact-form-title {
    font-size: 32px; }
  .contact-form-section-popup .contact-form-subtitle {
    font-size: 16px;
    margin-bottom: 30px; }
  .contact-form-section-popup .form-input,
  .contact-form-section-popup .form-textarea {
    padding: 16px 18px;
    font-size: 15px; }
  .contact-form-section-popup .form-submit-btn {
    padding: 16px 25px;
    font-size: 17px; } }
@media (max-width: 768px) {
  .main-title {
    margin-bottom: 15px; }

  .main-description {
    max-width: 100%; }

  .top-content {
    padding: 60px 20px 0; }
    .top-content .d-flex {
      flex-direction: column-reverse; }

  .bottom-content {
    padding: 0 20px 60px;
    margin-top: 0; }
    .bottom-content .d-flex {
      flex-direction: column; }

  .pasta-menu-slider {
    padding: 40px 0 80px 0; }
    .pasta-menu-slider .slider-title {
      font-size: 32px;
      margin-bottom: 50px; }
    .pasta-menu-slider .pasta-item {
      padding: 0 8px;
      transform: scale(0.9); }
      .pasta-menu-slider .pasta-item.active {
        transform: scale(1); }
      .pasta-menu-slider .pasta-item .pasta-info {
        margin-top: 15px; }
    .pasta-menu-slider .slider-navigation {
      bottom: -40px;
      gap: 15px; }
    .pasta-menu-slider .nav-arrow {
      width: 40px;
      height: 40px; }
      .pasta-menu-slider .nav-arrow:hover {
        transform: translate(0); }

  .why-love-it-section {
    padding: 40px 0; }
    .why-love-it-section .section-title {
      font-size: 28px;
      margin-bottom: 40px; }
    .why-love-it-section .feature-box {
      padding: 25px 15px;
      margin-bottom: 20px; }
    .why-love-it-section .feature-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 20px; }
      .why-love-it-section .feature-icon .heart-icon,
      .why-love-it-section .feature-icon .leaf-icon,
      .why-love-it-section .feature-icon .utensils-icon {
        font-size: 36px;
        width: 60px;
        height: 60px; }
    .why-love-it-section .feature-description {
      font-size: 13px;
      line-height: 1.5; }

  .location-hours-section {
    padding: 0px 0; }
    .location-hours-section .location-title {
      font-size: 28px;
      margin-bottom: 30px; }
    .location-hours-section .location-info {
      padding: 80px 20px; }
    .location-hours-section .info-item {
      margin-bottom: 25px; }
      .location-hours-section .info-item .info-icon {
        width: 20px;
        height: 20px;
        margin-right: 15px; }
      .location-hours-section .info-item .info-content .info-label {
        font-size: 14px; }
      .location-hours-section .info-item .info-content .info-value {
        font-size: 14px; }
    .location-hours-section .contact-form-section {
      margin-top: 40px; }
      .location-hours-section .contact-form-section .contact-title {
        margin-bottom: 20px; }

  canvas {
    width: 250px;
    height: 250px; }

  .contact-form-section-popup .contact-form-overlay {
    padding: 15px; }
  .contact-form-section-popup .contact-form-popup {
    padding: 30px 25px;
    border-radius: 16px;
    max-height: 85vh; }
  .contact-form-section-popup .contact-form-header {
    margin-bottom: 8px;
    gap: 15px; }
  .contact-form-section-popup .contact-form-title {
    font-size: 26px;
    line-height: 1.1; }
  .contact-form-section-popup .contact-form-close {
    width: 35px;
    height: 35px; }
    .contact-form-section-popup .contact-form-close img {
      width: 20px;
      height: 20px; }
  .contact-form-section-popup .contact-form-subtitle {
    font-size: 15px;
    margin-bottom: 25px; }
  .contact-form-section-popup .contact-form {
    gap: 18px; }
  .contact-form-section-popup .form-group {
    gap: 6px; }
  .contact-form-section-popup .form-input,
  .contact-form-section-popup .form-textarea {
    padding: 15px 16px;
    font-size: 14px;
    border-radius: 10px; }
  .contact-form-section-popup .form-textarea {
    min-height: 100px; }
  .contact-form-section-popup .error-message {
    font-size: 13px;
    margin-top: 3px; }
  .contact-form-section-popup .form-submit-btn {
    min-width: 100%;
    margin-top: 5px; }

  .fork-pasta-img-section {
    height: 50vh; }

  .image-section {
    display: none; }

  .fixed-social-links a {
    background-size: 20px;
    width: 40px;
    height: 40px; }

  .slider-section .slider-track .slide-2 #slide3Canvas {
    margin-bottom: -80px;
    margin-top: -100px; } }

/*# sourceMappingURL=main-responsive.css.map */