/* Stitch's original tactile brand rules. Desktop and mobile remain visually separate. */

    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 20px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    }
    
    /* Tactile Paper Details */
    .ink-shadow {
      box-shadow: 2px 2px 0px #1F1B0F;
    }
    .ink-shadow-lg {
      box-shadow: 4px 4px 0px #1F1B0F;
    }
    .magenta-shadow {
      box-shadow: 3px 3px 0px #B60056;
    }
    .receipt-edge {
      background-image: radial-gradient(circle at 10px -5px, transparent 12px, #fff8f1 13px);
      background-size: 20px 20px;
      background-repeat: repeat-x;
    }
    
    /* Subtle Marquee Animation */
    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    #desktop-site .animate-marquee {
      display: flex;
      width: 200%;
      animation: marquee 28s linear infinite;
    }
    #desktop-site .animate-marquee:hover {
      animation-play-state: paused;
    }
  

    /* Mobile-First Envelope Constraints */
    .mobile-design {
      background-color: #12100b;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: 100vh;
      font-feature-settings: "cv02", "cv03", "cv04", "cv11";
      -webkit-font-smoothing: antialiased;
    }
    
    .mobile-screen-shell {
      width: 100%;
      max-width: 100%;
      min-height: 100vh;
      background-color: #fff8f1;
      position: relative;
      overflow-x: hidden;
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.45);
    }

    /* Tactile Hard Print Offsets */
    .btn-press:active {
      transform: translate(1.5px, 1.5px);
      box-shadow: 0px 0px 0px #1f1b0f !important;
    }

    .hard-shadow-sm {
      box-shadow: 2px 2px 0px #1f1b0f;
    }

    .hard-shadow-md {
      box-shadow: 3px 3px 0px #1f1b0f;
    }

    .hard-shadow-magenta {
      box-shadow: 3px 3px 0px #b60056;
    }

    /* Serration Mask Pattern */
    .receipt-perforation {
      background-image: radial-gradient(#fff8f1 6px, transparent 6px);
      background-size: 16px 16px;
      background-position: -8px -8px;
    }

    /* Barcode simulation pattern */
    .barcode-lines {
      background: repeating-linear-gradient(
        90deg,
        #1f1b0f 0,
        #1f1b0f 2px,
        transparent 2px,
        transparent 4px,
        #1f1b0f 4px,
        #1f1b0f 7px,
        transparent 7px,
        transparent 9px,
        #1f1b0f 9px,
        #1f1b0f 12px
      );
    }
    
    .barcode-lines-light {
      background: repeating-linear-gradient(
        90deg,
        #fff8f1 0,
        #fff8f1 2px,
        transparent 2px,
        transparent 4px,
        #fff8f1 4px,
        #fff8f1 6px,
        transparent 6px,
        transparent 9px,
        #fff8f1 9px,
        #fff8f1 11px
      );
    }

    /* Marquee animation */
    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }
    #mobile-site .animate-marquee {
      display: inline-flex;
      animation: marquee 16s linear infinite;
    }
  
/* Mobile shell from Stitch is now fluid on phones instead of a 390px demo frame. */
.mobile-design {background: #fff8f1; min-height: 100dvh; width: 100%;}
.mobile-design .mobile-screen-shell {width:100%; max-width:100%; min-height:100dvh; box-shadow:none;}
.no-scrollbar::-webkit-scrollbar {display:none}
.no-scrollbar {scrollbar-width:none; -ms-overflow-style:none}
#desktop-site { display:block; --font-headline-sm: "Epilogue", "Anek Bangla", sans-serif; --font-headline-md: "Epilogue", "Anek Bangla", sans-serif; --font-headline-lg: "Epilogue", "Anek Bangla", sans-serif; --font-headline-xl: "Epilogue", "Anek Bangla", sans-serif; --font-body-md: "DM Sans", "Hind Siliguri", sans-serif; --font-body-lg: "DM Sans", "Hind Siliguri", sans-serif; --font-body-sm: "DM Sans", "Hind Siliguri", sans-serif; }
#mobile-site { display:none; --font-headline-sm: "Anek Bangla", "Epilogue", sans-serif; --font-headline-md: "Anek Bangla", "Epilogue", sans-serif; --font-headline-lg: "Anek Bangla", "Epilogue", sans-serif; --font-headline-xl: "Anek Bangla", "Epilogue", sans-serif; --font-headline-xl-mobile: "Anek Bangla", "Epilogue", sans-serif; --font-headline-lg-mobile: "Anek Bangla", "Epilogue", sans-serif; --font-body-md: "Hind Siliguri", "DM Sans", sans-serif; --font-body-lg: "Hind Siliguri", "DM Sans", sans-serif; --font-body-sm: "Hind Siliguri", "DM Sans", sans-serif; --text-headline-xl-mobile: 34px; --text-headline-xl-mobile--line-height:42px; }
@media (max-width:767px){#desktop-site{display:none} #mobile-site{display:block}}
@media (min-width:768px){#mobile-site{display:none}}
html {scroll-padding-top: 76px}
@media (max-width:767px){html {scroll-padding-top:65px}}
:focus-visible {outline: 2px solid #b60056; outline-offset:3px}