/* GAS-iframe parity, native-viewport edition.
       The UI was designed on a fixed 980px layout canvas (GAS HtmlService never
       emitted a viewport meta, so phones laid out at ~980px and visually scaled
       the whole canvas down to the screen width). We now use a native
       width=device-width viewport instead, and reproduce that exact scaling in
       CSS: every historical px value has been converted to rem at the legacy
       root of 16px (1rem = 16px of the old canvas), and the root font-size
       below scales with the viewport so that a 980px-wide viewport still gets
       a 16px root — i.e. calc(100vw / (980 / 16)). On a 390pt phone this gives
       the same ~0.398 apparent scale the browser used to apply, but rendered
       natively (crisp text, sane mobile behavior). */
    html {
      font-size: calc(100vw / 61.25); /* = 16px at the legacy 980px canvas width */
    }

    /* Desktop / tablet ("web frame", class set by the head script): the frame
       is a fixed phone-width column that must not scale with the window, so
       the root is pinned to the legacy 16px. */
    html.desktop-view {
      font-size: 16px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      background: #e8e8e8;
      color: #333;
      line-height: 1.2 !important;
      padding: 0.5rem !important;
      font-size: 2.75rem !important;
    }

    .container {
      max-width: 100% !important;
      margin: 0 auto;
      padding: 0 !important;
    }

    header {
      background: white;
      padding: 2rem !important;
      border-radius: 0.5rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
      margin-bottom: 2rem !important;
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    .menu-button {
      padding: 2.5rem 3rem !important;
      font-size: 2.5rem !important;
      background: white;
      color: #666;
      border: 0.125rem solid #e0e0e0;
      border-radius: 0.375rem;
      cursor: pointer;
      min-height: 7rem !important;
      min-width: 7rem !important;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s;
      position: relative;
      flex-shrink: 0;
    }

    .menu-button:hover {
      background: #f5f5f5;
      border-color: #d0d0d0;
    }

    .menu-icon {
      width: 1em;
      height: 1em;
      display: inline-block;
      position: relative;
    }

    .menu-icon::before,
    .menu-icon::after {
      content: '';
      display: block;
      width: 100%;
      height: 0.15em;
      background: currentColor;
      border-radius: 0.125rem;
      position: absolute;
      transition: all 0.2s;
    }

    .menu-icon::before {
      top: 0;
      box-shadow: 0 0.35em 0 currentColor;
    }

    .menu-icon::after {
      bottom: 0;
    }

    .menu-popup {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 0.5rem;
      background: white;
      border: 0.125rem solid #e0e0e0;
      border-radius: 0.375rem;
      box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
      padding: 1rem 0;
      min-width: 12.5rem;
      z-index: 1000;
      display: none;
    }

    .menu-popup.show {
      display: block;
    }

    .menu-option {
      padding: 1.5rem 2rem !important;
      font-size: 2.5rem !important;
      cursor: pointer;
      transition: background-color 0.2s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .menu-option:hover {
      background: #f5f5f5;
    }

    .search-container {
      position: relative;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }
    
    .page-title {
      font-size: 7.5rem !important;
      /* Loading screen: title + logo render as one centered group (the logo
         used to be absolutely pinned to the bottom, leaving a huge gap). */
      margin-bottom: 2.5rem !important;
      line-height: 1.1 !important;
      color: #1a1a1a;
      text-align: center;
    }
    
    .search-input-wrapper {
      position: relative;
      flex: 1;
    }

    .search-input {
      width: 100%;
      padding: 2.5rem 3rem !important;
      padding-right: 5rem !important;
      font-size: 2.5rem !important;
      border: 0.125rem solid #e0e0e0;
      border-radius: 0.375rem;
      transition: border-color 0.2s;
      min-height: 7rem !important;
    }
    
    .search-clear {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
      display: none;
      align-items: center;
      justify-content: center;
      color: #666;
      font-size: 2.5rem !important;
      line-height: 1;
      z-index: 10;
      width: 3.75rem;
      height: 3.75rem;
    }
    
    .search-clear:hover {
      color: #333;
    }
    
    .search-clear.show {
      display: flex;
    }
    
    .search-clear::before {
      content: '×';
      font-size: 3.125rem !important;
      line-height: 1;
    }

    .filter-button {
      padding: 2.5rem 3rem !important;
      font-size: 2.5rem !important;
      background: #e0e0e0;
      color: #666;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      min-height: 7rem !important;
      min-width: 7rem !important;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 0.2s, color 0.2s;
    }

    .filter-button:hover {
      background: #d0d0d0;
    }

    .filter-button.active {
      background: #4285f4;
      color: white;
    }

    .filter-button.active:hover {
      background: #357ae8;
    }

    .filter-icon {
      width: 1em;
      height: 1em;
      display: inline-block;
    }

    .filter-icon::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }

    .filter-label {
      display: none;
      font-weight: 700;
      color: white;
      text-transform: uppercase;
      font-size: 0.9em;
      letter-spacing: 0.03125rem;
    }

    .filter-button.active .filter-icon {
      display: none;
    }

    .filter-button.active .filter-label {
      display: inline-block;
    }

    .filter-popup {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 0.5rem;
      background: white;
      border: 0.125rem solid #e0e0e0;
      border-radius: 0.375rem;
      box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
      padding: 1rem 0;
      min-width: 12.5rem;
      z-index: 1000;
      display: none;
    }

    .filter-popup.show {
      display: block;
    }

    .filter-option {
      padding: 1.5rem 2rem !important;
      font-size: 2.5rem !important;
      cursor: pointer;
      transition: background-color 0.2s;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
    }

    .filter-option:hover {
      background: #f5f5f5;
    }

    .filter-option.active {
      background: #e3f2fd;
      font-weight: 600;
    }

    .filter-option.active:hover {
      background: #bbdefb;
    }

    .filter-remove {
      font-size: 3.125rem !important;
      line-height: 1;
      color: #666;
      margin-left: 1rem;
      padding: 0 0.5rem;
      cursor: pointer;
      flex-shrink: 0;
    }

    .filter-remove:hover {
      color: #c33;
    }

    .search-input:focus {
      outline: none;
      border-color: #4285f4;
    }

    /* Search other views popup */
    .search-other-views-popup {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 0.5rem;
      background: white;
      border: 0.125rem solid #4285f4;
      border-radius: 0.375rem;
      box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15);
      padding: 1rem;
      z-index: 1001;
      display: none;
    }

    .search-other-views-popup.show {
      display: block;
    }

    .search-other-views-header {
      font-size: 2rem !important;
      font-weight: 600;
      color: #666;
      margin-bottom: 0.75rem;
      padding-bottom: 0.5rem;
      border-bottom: 0.0625rem solid #e0e0e0;
    }

    .search-other-views-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .search-other-views-item {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: #e3f2fd;
      border: 0.0625rem solid #90caf9;
      border-radius: 1.25rem;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 2rem !important;
      color: #1565c0;
      font-weight: 500;
    }

    .search-other-views-item:hover {
      background: #bbdefb;
      border-color: #42a5f5;
      transform: scale(1.02);
    }

    .search-other-views-item-count {
      background: #1565c0;
      color: white;
      padding: 0.2rem 0.5rem;
      border-radius: 0.625rem;
      font-size: 1.6rem !important;
      font-weight: 700;
      min-width: 1.5rem;
      text-align: center;
    }

    /* iPad Air optimizations for search other views popup */
    @media (orientation: landscape) and (min-width: 769px) and (max-width: 1366px) {
      .search-other-views-header {
        font-size: 1rem !important;
      }
      
      .search-other-views-item {
        font-size: 1rem !important;
        padding: 0.35rem 0.75rem;
      }
      
      .search-other-views-item-count {
        font-size: 0.8rem !important;
      }
    }

    /* Mobile optimizations for search other views popup */
    @media (orientation: portrait) and (max-width: 768px) and (hover: hover) and (pointer: fine) {
      .search-other-views-header {
        font-size: 0.9rem !important;
      }
      
      .search-other-views-item {
        font-size: 0.9rem !important;
        padding: 0.3rem 0.6rem;
      }
      
      .search-other-views-item-count {
        font-size: 0.75rem !important;
      }
    }

    .loading {
      text-align: center;
      padding: 2rem;
      color: #666;
      font-size: 3em;
    }

    .loading-logo-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: calc(100vh - 18.75rem);
      padding: 0 0.625rem;
      position: relative;
    }

    .loading-message {
      font-size: 2.4rem;
      color: #666;
      font-weight: 500;
      margin-bottom: 2rem;
      text-align: center;
    }

    .loading-logo {
      /* In flow, right under the title — the group centers as one block
         (was absolutely pinned to the container bottom). */
      width: 80%;
      max-width: 32rem;
      height: auto;
      object-fit: contain;
      margin-top: 0.5rem;
    }

    .error {
      background: #fee;
      color: #c33;
      padding: 1rem;
      border-radius: 0.375rem;
      margin: 1rem 0;
    }

    .category-section {
      margin-bottom: 1.5rem !important;
    }
    
    .category-section.collapsed .products-grid {
      display: none !important;
    }

    .category-header {
      color: white;
      padding: 1.5rem !important;
      border-radius: 0.375rem 0.375rem 0 0;
      font-weight: 600;
      font-size: 4rem !important;
      line-height: 1.1 !important;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
    }
    
    .category-header-add-button {
      background: rgba(255, 255, 255, 0.2);
      color: white;
      border: 0.125rem solid rgba(255, 255, 255, 0.5);
      border-radius: 1.25rem;
      padding: 0.75rem 2.5rem;
      font-size: 2.8rem;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      transition: all 0.2s ease;
      flex-shrink: 0;
    }
    
    .category-header-add-button:hover {
      background: rgba(255, 255, 255, 0.3);
      border-color: rgba(255, 255, 255, 0.8);
      transform: scale(1.1);
    }
    
    .category-header-add-button:active {
      transform: scale(0.95);
    }

    .products-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 1.5rem !important;
      background: white;
      padding: 2rem !important;
      border-radius: 0 0 0.375rem 0.375rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
    }
    
    /* Date-grouped view styles (for Schedule and Special views) */
    .date-grouped-view {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }
    
    .date-section {
      margin-bottom: 1rem;
    }
    
    .date-section .products-grid {
      border-radius: 0.375rem;
    }
    
    .date-header {
      background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);
      color: white;
      padding: 1.25rem 1.5rem !important;
      border-radius: 0.375rem 0.375rem 0 0;
      font-weight: 600;
      font-size: 3.5rem !important;
      line-height: 1.1 !important;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    
    .date-header::before {
      content: '📅';
      font-size: 0.85em;
    }
    
    .product-card {
      width: 100% !important;
      max-width: 100% !important;
      border: 0.0625rem solid #d0d0d0;
      border-radius: 0.9375rem;
      padding: 2rem !important;
      transition: transform 0.2s, box-shadow 0.2s;
      box-sizing: border-box;
      box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.1);
    }

    .product-card:hover {
      transform: translateY(-0.125rem);
      box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
    }

    .product-card.disabled {
      background: 
        repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 0.375rem,
          rgba(100, 100, 100, 0.18) 0.375rem,
          rgba(100, 100, 100, 0.18) 0.625rem
        ),
        #e8e8e8 !important;
      border-color: #bbb !important;
    }


    .product-card.scheduled-deleted {
      border: 0.25rem solid #c33;
      border-radius: 0.9375rem;
    }

    .product-card.scheduled-created {
      border: 0.25rem solid #006400;
      border-radius: 0.9375rem;
    }

    .product-field.scheduled-change {
      font-weight: 700;
    }
    
    .product-field.scheduled-change .product-field-label,
    .product-field.scheduled-change .product-field-value {
      color: #006400;
      font-weight: 700;
    }

    .product-field.daily-fresh .product-field-label,
    .product-field.daily-fresh .product-field-value {
      color: #1976d2;
      font-weight: 700;
    }

    .product-field .daily-tag {
      display: inline-block;
      font-size: 0.65em;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03125rem;
      color: #007aff;
      background: #e3f2fd;
      padding: 0.0625rem 0.3125rem;
      border-radius: 0.1875rem;
      margin-left: 0.375rem;
      vertical-align: middle;
    }

    .product-card-header {
      display: flex;
      gap: 1.5rem;
      align-items: flex-start;
      margin-bottom: 1rem !important;
    }

    .product-card-thumbnail-col {
      flex: 0 0 7.5rem;
      width: 7.5rem;
      height: 7.5rem;
    }

    .product-card-content-col {
      flex: 1;
      min-width: 0;
    }

    .product-card-thumbnail {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 0.5rem;
      background: #f0f0f0;
      cursor: pointer;
    }

    .product-card-thumbnail-placeholder {
      width: 100%;
      height: 100%;
      background: #f0f0f0;
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .product-card-thumbnail-placeholder::before {
      content: '🖼️';
      font-size: 2rem;
      opacity: 0.3;
    }

    .product-name {
      font-size: 2.625rem !important;
      font-weight: 600;
      margin-bottom: 0.5rem !important;
      line-height: 1.3 !important;
      color: #1a1a1a;
    }

    .product-name-subtitle {
      font-size: 0.8em;
      font-weight: 400;
      color: #666;
    }

    .product-indicators {
      display: inline-flex;
      align-items: center;
      gap: 0.8rem;
      margin-left: 0;
      vertical-align: middle;
      flex-wrap: wrap;
      flex-shrink: 0;
    }

    .available-on-website-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2rem;
      height: 2rem;
      color: #2e7d32;
      vertical-align: middle;
      line-height: 1;
      flex-shrink: 0;
    }

    .available-on-website-indicator svg {
      width: 100%;
      height: 100%;
    }

    /* Square sync status indicator */
    .square-sync-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      vertical-align: middle;
      position: relative;
      flex-shrink: 0;
    }

    .label-indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      color: #053e7f;
      cursor: pointer;
      transition: transform 0.2s, color 0.2s;
      vertical-align: middle;
      flex-shrink: 0;
    }

    .label-indicator:hover {
      color: #0d47a1;
      transform: scale(1.1);
    }

    .label-indicator svg {
      width: 100%;
      height: 100%;
    }

    .product-field {
      margin-bottom: 0.75rem !important;
      font-size: 2.5rem !important;
      line-height: 1.2 !important;
    }

    .product-field-label {
      font-weight: 600;
      color: #666;
      margin-right: 1.5rem;
      font-size: 2.5rem !important;
    }

    .product-field-value {
      color: #333;
      font-size: 2.5rem !important;
    }


    .loading-spinner {
      width: 12.5rem;
      height: 12.5rem;
      margin: 0 auto 3rem;
      border: 1.25rem solid #f3f3f3;
      border-top: 1.25rem solid #4285f4;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .loading-text {
      font-size: 2.5rem !important;
      color: #666;
    }

    .group-header {
      font-size: 3.5rem !important;
      font-weight: 600;
      margin: 1.5rem 0 1rem 0 !important;
      line-height: 1.1 !important;
      color: #1a1a1a;
      padding-left: 0.5rem !important;
    }

    .product-card-grouped-item {
      margin-left: 2.8125rem !important;
      width: calc(100% - 2.8125rem) !important;
      max-width: calc(100% - 2.8125rem) !important;
    }

    /* Grouped items styling for swipe container */
    .product-card-swipe-container.product-card-grouped-item {
      margin-left: 2.8125rem !important;
      width: calc(100% - 2.8125rem) !important;
      max-width: calc(100% - 2.8125rem) !important;
    }

    .product-card-swipe-container.product-card-grouped-item .product-card {
      margin-left: 0 !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    .product-card {
      position: relative;
    }

    .schedule-date-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      padding: 0.75rem 1.5rem;
      border-radius: 0.375rem;
      font-weight: 700;
      color: white;
      font-size: 2rem !important;
      line-height: 1.2 !important;
      z-index: 10;
    }

    .schedule-date-badge.enabled {
      background: #006400;
    }

    .schedule-date-badge.disabled {
      background: #c33;
    }

    .special-badge {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      padding: 0.75rem 1.5rem;
      border-radius: 0.375rem;
      font-weight: 700;
      color: white;
      background: #d32f2f; /* Red background */
      font-size: 1.8rem !important; /* Increased by 20% from 1.5rem */
      line-height: 1.2 !important;
      z-index: 10;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.2);
    }

    .special-badge-label {
      font-size: 0.8em;
      text-transform: uppercase;
      letter-spacing: 0.0625rem;
      margin-bottom: 0.125rem;
      font-weight: 900;
    }

    .special-badge-date {
      white-space: pre-wrap;
      font-size: 0.9em;
    }

    .wholesale-customers-filter {
      margin-top: 1.5rem;
      padding: 1.5rem;
      background: white;
      border-radius: 0.375rem;
      box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.1);
      display: none;
    }
    
    .wholesale-customers-filter.show {
      display: block;
    }
    
    .wholesale-customers-filter-label {
      font-size: 2.5rem !important;
      font-weight: 600;
      margin-bottom: 1rem;
      color: #333;
    }
    
    .wholesale-customers-combobox {
      border: 0.125rem solid #e0e0e0;
      border-radius: 0.375rem;
      padding: 0.75rem 1rem;
      background: #ffffff;
    }
    
    .wholesale-customers-selected {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
      min-height: 2.5rem;
    }
    
    .wholesale-customer-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.8rem;
      border-radius: 62.4375rem;
      background: #e3f2fd;
      font-size: 2rem !important;
      font-weight: 600;
      color: #1a1a1a;
    }
    
    .wholesale-customer-chip-remove {
      border: none;
      background: transparent;
      cursor: pointer;
      font-size: 2rem !important;
      line-height: 1;
      padding: 0 0.25rem;
      color: #555;
    }
    
    .wholesale-customer-chip-remove:hover {
      color: #c33;
    }
    
    .wholesale-customers-search-input {
      width: 100%;
      border: none;
      outline: none;
      font-size: 2.1rem !important;
      padding: 0.5rem 0.25rem;
      border-radius: 0.25rem;
    }
    
    .wholesale-customers-search-input::placeholder {
      color: #999;
    }
    
    .wholesale-customers-checkboxes {
      max-height: 16.25rem;
      overflow-y: auto;
      margin-top: 0.5rem;
      border-top: 0.0625rem solid #e0e0e0;
      padding-top: 0.5rem;
    }
    
    .wholesale-customer-option {
      display: flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: background-color 0.2s;
      font-size: 2rem !important;
      gap: 0.5rem;
    }
    
    .wholesale-customer-option:hover {
      background: #f5f5f5;
    }
    
    .wholesale-customer-option.selected {
      background: #e3f2fd;
      font-weight: 600;
    }
    
    .wholesale-customer-option-check {
      width: 2.2rem;
      text-align: center;
      font-weight: 700;
      color: #1a73e8;
    }
    
    .wholesale-customer-option-label {
      flex: 1;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Add style for retailTaxable checkbox color */
    #retailTaxableRow .checkbox-text {
      color: #333 !important;
    }

    /* iPad Air optimizations - reduce font sizes by 2 (landscape only) */
    @media (orientation: landscape) and (min-width: 769px) and (max-width: 1366px) {
      body {
        font-size: 1.375rem !important;
      }
      
      .container {
        font-size: 1.375rem !important;
      }
      
      .page-title {
        font-size: 3.75rem !important;
        margin-bottom: 2.5rem !important;
      }
      
      .menu-button {
        font-size: 1.25rem !important;
        min-height: 3.5rem !important;
        min-width: 3.5rem !important;
        padding: 1.25rem 1.5rem !important;
      }
      
      .menu-option {
        font-size: 1.25rem !important;
        padding: 0.75rem 1rem !important;
      }
      
      .search-input {
        font-size: 1.25rem !important;
        padding-right: 3rem !important;
      }
      
      .search-clear {
        font-size: 1.25rem !important;
        width: 1.875rem;
        height: 1.875rem;
        right: 0.5rem;
      }
      
      .search-clear::before {
        font-size: 1.5625rem !important;
      }
      
      .filter-button {
        font-size: 1.25rem !important;
      }
      
      .filter-option {
        font-size: 1.25rem !important;
        padding: 0.75rem 1rem !important;
      }
      
      .filter-remove {
        font-size: 1.5625rem !important;
      }
      
      .category-header {
        font-size: 2rem !important;
      }
      
      .date-header {
        font-size: 1.75rem !important;
        padding: 1rem 1.25rem !important;
      }
      
      .group-header {
        font-size: 1.75rem !important;
      }
      
      .product-card-header {
        gap: 0.75rem;
        margin-bottom: 0.5rem !important;
      }

      .product-card-thumbnail-col {
        flex: 0 0 3.75rem;
        width: 3.75rem;
        height: 3.75rem;
      }

      .product-name {
        font-size: 1.3125rem !important;
        line-height: 1.3 !important;
      }
      
      .product-field {
        font-size: 1.25rem !important;
      }
      
      .product-field-label {
        font-size: 1.25rem !important;
      }
      
      .product-field-value {
        font-size: 1.25rem !important;
      }
      
      .loading-text {
        font-size: 1.25rem !important;
      }
      
      .wholesale-customers-filter-label {
        font-size: 1.25rem !important;
      }
      
      .wholesale-customer-checkbox {
        font-size: 1rem !important;
      }
      
      .schedule-date-badge {
        font-size: 1rem !important;
      }

      .special-badge {
        font-size: 0.85rem !important;
        padding: 0.5rem 1rem;
      }
      
      /* Reduce vertical margins in product cards */
      .product-card {
        padding: 0.75rem 1rem !important;
      }
      
      /* Reduce vertical space between group header and product card */
      .group-header {
        margin-bottom: 0.5rem !important;
      }
      
      /* Reduce vertical space between product cards */
      .products-grid {
        gap: 0.75rem !important;
      }
      
      /* Reduce margins inside product cards */
      .product-field {
        margin-bottom: 0.5rem !important;
      }
      
      .product-name {
        margin-bottom: 0.2rem !important;
      }

      .product-indicators {
        gap: 0.4rem;
        margin-left: 0;
        margin-top: 0;
        flex-shrink: 0;
      }

      .available-on-website-indicator {
        width: 1.2rem;
        height: 1.2rem;
      }

      .square-sync-indicator {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
      }

      .label-indicator {
        width: 0.65rem;
        height: 0.65rem;
        flex-shrink: 0;
      }
    }

    /* Mobile optimizations - larger text and spacing (portrait only) */
    @media (orientation: portrait) and (max-width: 768px) and (hover: hover) and (pointer: fine) {
      body {
        padding: 0.75rem;
        font-size: 1rem;
      }

      header {
        padding: 1.25rem;
      }

      .page-title {
        font-size: 2.625rem;
        margin-bottom: 2.5rem !important;
      }

      .menu-button {
        font-size: 1rem;
        padding: 0.875rem 1rem;
        min-height: 2.75rem;
        min-width: 2.75rem;
      }

      .menu-option {
        font-size: 1rem;
        padding: 0.875rem 1rem;
      }

      .search-input {
        font-size: 1rem;
        padding: 0.875rem 1rem;
      }

      .filter-button {
        font-size: 1rem;
        padding: 0.875rem 1rem;
        min-height: 2.75rem;
        min-width: 2.75rem;
      }

      .filter-option {
        font-size: 1rem;
        padding: 0.875rem 1rem;
      }

      .filter-remove {
        font-size: 1.25rem !important;
      }

      .products-grid {
        padding: 1rem;
        gap: 1rem;
      }

      .product-card {
        padding: 1.25rem;
      }

      .category-header {
        padding: 1rem;
        font-size: 1.25rem;
      }

      .date-header {
        padding: 0.875rem 1rem;
        font-size: 1.1rem;
      }

      .product-card-header {
        gap: 0.75rem;
        margin-bottom: 0.5rem !important;
      }

      .product-card-thumbnail-col {
        flex: 0 0 3.125rem;
        width: 3.125rem;
        height: 3.125rem;
      }

      .product-name {
        font-size: 1.1rem !important; /* Slightly larger for mobile */
        margin-bottom: 0.2rem !important;
        line-height: 1.3 !important;
      }

      .product-indicators {
        gap: 0.25rem;
        margin-left: 0;
        margin-top: 0;
        flex-shrink: 0;
      }

      .available-on-website-indicator {
        width: 1rem;
        height: 1rem;
      }

      .square-sync-indicator {
        width: 1.1rem;
        height: 1.1rem;
        flex-shrink: 0;
      }

      .label-indicator {
        width: 0.65rem;
        height: 0.65rem;
        flex-shrink: 0;
      }

      .product-field {
        margin-bottom: 0.75rem;
        font-size: 1rem;
      }

      .product-field-label {
        font-size: 1rem;
      }

      .product-field-value {
        font-size: 1rem;
      }

      .price-button {
        padding: 0.625rem 1rem;
        font-size: 1rem;
        min-height: 2.75rem;
      }
    }

    .product-card {
      cursor: pointer;
    }

    /* Product card swipe container for sync status */
    .product-card-swipe-container {
      position: relative;
      overflow: hidden;
      border-radius: 0.9375rem;
    }

    .product-card-swipe-container .product-card {
      position: relative;
      z-index: 2;
      transition: transform 0.3s ease-out;
      touch-action: pan-y;
      margin-bottom: 0 !important;
    }

    .product-card-swipe-container.swiped .product-card {
      transform: translateX(-75%);
    }

    /* Sync status panel (revealed on swipe) */
    .sync-status-panel {
      position: absolute;
      top: 0;
      right: 0;
      width: 75%;
      height: 100%;
      background: #f5f5f0;
      border-radius: 0 0.9375rem 0.9375rem 0;
      display: flex;
      flex-direction: column;
      padding: 0;
      box-sizing: border-box;
      z-index: 1;
      overflow: hidden;
    }

    .sync-status-panel.loading {
      justify-content: center;
      align-items: center;
    }

    .sync-status-loader {
      width: 3.75rem;
      height: 3.75rem;
      border: 0.375rem solid #e0e0e0;
      border-top: 0.375rem solid #4285f4;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    /* Animated dots for "Checking..." state */
    .sync-checking-dots {
      display: inline-block;
      width: 1.2em;
      text-align: left;
    }

    .sync-checking-dots::after {
      content: '';
      animation: checking-dots 1.5s infinite;
    }

    @keyframes checking-dots {
      0% { content: ''; }
      25% { content: '.'; }
      50% { content: '..'; }
      75% { content: '...'; }
      100% { content: ''; }
    }

    /* Checking state styling */
    .sync-status-item .sync-status-item-label .sync-checking-dots + span,
    .sync-status-item .sync-status-item-label:has(.sync-checking-dots) {
      color: #666;
      font-style: italic;
    }

    .sync-status-content {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      font-size: 2rem;
      font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
      padding: 0.75rem;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
      color: #333;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .sync-status-content::-webkit-scrollbar {
      display: none;
    }

    .sync-status-item {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding: 0.4rem 0;
      border-bottom: 0.0625rem solid #ddd;
    }

    .sync-status-item:last-child {
      border-bottom: none;
    }

    .sync-status-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
    }

    .sync-status-item-label {
      font-weight: 600;
      color: #1565c0;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex: 1;
    }

    .sync-status-icon {
      width: 1em;
      height: 1em;
      flex-shrink: 0;
    }

    .sync-status-icon.ok {
      color: #2e7d32;
    }

    .sync-status-icon.error {
      color: #e65100;
    }

    .sync-status-icon.warning {
      color: #f9a825;
    }

    .sync-status-details {
      font-size: 0.9em;
      color: #555;
      padding-left: 1.4em;
      word-break: break-word;
      white-space: pre-wrap;
    }

    .sync-status-details.error {
      color: #d84315;
    }

    .sync-status-details.ok {
      color: #2e7d32;
    }

    .sync-status-details.warning {
      color: #e65100;
    }

    .sync-status-date {
      font-size: 0.85em;
      color: #777;
    }

    .sync-button {
      padding: 0.4rem 1rem;
      font-size: 1.6rem;
      font-weight: 500;
      font-family: inherit;
      color: white;
      background: #e65100;
      border: none;
      border-radius: 0.1875rem;
      cursor: pointer;
      transition: background-color 0.2s, transform 0.1s;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .sync-button:hover {
      background: #ff6d00;
    }

    .sync-button:active {
      transform: scale(0.95);
    }

    .sync-button:disabled {
      background: #bbb;
      color: #777;
      cursor: not-allowed;
    }

    .sync-button.syncing {
      opacity: 0.7;
      cursor: wait;
    }

    .sync-button.sync-button-refresh {
      background: #1565c0;
      color: white;
    }

    .sync-button.sync-button-refresh:hover {
      background: #1976d2;
    }

    /* iPad Air optimizations for sync panel */
    @media (orientation: landscape) and (min-width: 769px) and (max-width: 1366px) {
      .sync-status-content {
        font-size: 1.8rem;
      }
      
      .sync-status-loader {
        width: 2.5rem;
        height: 2.5rem;
        border-width: 0.25rem;
      }
    }

    /* Mobile optimizations for sync panel */
    @media (orientation: portrait) and (max-width: 768px) and (hover: hover) and (pointer: fine) {
      .sync-status-content {
        font-size: 1.6rem;
        gap: 0.4rem;
        padding: 0.5rem;
      }
      
      .sync-status-loader {
        width: 1.875rem;
        height: 1.875rem;
        border-width: 0.1875rem;
      }
      
      .sync-status-item {
        padding: 0.3rem 0;
      }
      
      .sync-button {
        font-size: 1.4rem;
        padding: 0.4rem 0.8rem;
      }
    }

    /* Disable product cards when loading */
    body.loading-active .product-card {
      cursor: not-allowed;
      opacity: 0.6;
      pointer-events: none;
    }

    body.loading-active .product-card:hover {
      transform: none;
      box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.1);
    }

    /* Pull-to-refresh styles */
    .pull-to-refresh-indicator {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%) translateY(0);
      z-index: 9999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem 2rem;
      background: white;
      border-radius: 0 0 0.75rem 0.75rem;
      box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.15);
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      pointer-events: none;
    }

    .pull-to-refresh-indicator.ready {
      background: #e3f2fd;
    }

    .pull-to-refresh-indicator.refreshing {
      background: #4285f4;
    }

    .pull-to-refresh-indicator.refreshing .pull-to-refresh-text {
      color: white;
    }

    .pull-to-refresh-spinner {
      width: 2.5rem;
      height: 2.5rem;
      margin-bottom: 0.5rem;
      border: 0.25rem solid #f3f3f3;
      border-top: 0.25rem solid #4285f4;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pull-to-refresh-indicator.ready .pull-to-refresh-spinner,
    .pull-to-refresh-indicator.refreshing .pull-to-refresh-spinner {
      opacity: 1;
    }

    .pull-to-refresh-indicator.refreshing .pull-to-refresh-spinner {
      border-top-color: white;
    }

    .pull-to-refresh-text {
      font-size: 1.5rem !important;
      color: #666;
      text-align: center;
      white-space: nowrap;
    }

    /* iPad Air optimizations for pull-to-refresh */
    @media (orientation: landscape) and (min-width: 769px) and (max-width: 1366px) {
      .pull-to-refresh-text {
        font-size: 1rem !important;
      }
      
      .pull-to-refresh-spinner {
        width: 1.875rem;
        height: 1.875rem;
        border-width: 0.1875rem;
      }
    }

    /* Mobile optimizations for pull-to-refresh */
    @media (orientation: portrait) and (max-width: 768px) and (hover: hover) and (pointer: fine) {
      .pull-to-refresh-text {
        font-size: 0.875rem !important;
      }
      
      .pull-to-refresh-spinner {
        width: 1.5rem;
        height: 1.5rem;
        border-width: 0.1875rem;
        margin-bottom: 0.25rem;
      }
      
      .pull-to-refresh-indicator {
        padding: 0.5rem 1rem;
      }
    }

    /* Refresh indicator (bottom right corner) */
    .refresh-indicator {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      width: 10rem;
      height: 10rem;
      background: rgba(66, 133, 244, 0.95);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      z-index: 9998;
    }

    .refresh-indicator.active {
      opacity: 1;
    }

    .refresh-icon {
      width: 6rem;
      height: 6rem;
      fill: white;
      animation: rotate-refresh 1s linear infinite;
    }

    @keyframes rotate-refresh {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* iPad Air optimizations for refresh indicator */
    @media (orientation: landscape) and (min-width: 769px) and (max-width: 1366px) {
      .refresh-indicator {
        width: 7.5rem;
        height: 7.5rem;
        bottom: 1.5rem;
        right: 1.5rem;
      }
      
      .refresh-icon {
        width: 4.5rem;
        height: 4.5rem;
      }
    }

    /* Mobile optimizations for refresh indicator */
    @media (orientation: portrait) and (max-width: 768px) and (hover: hover) and (pointer: fine) {
      .refresh-indicator {
        width: 6.25rem;
        height: 6.25rem;
        bottom: 1rem;
        right: 1rem;
      }
      
      .refresh-icon {
        width: 3.75rem;
        height: 3.75rem;
      }
    }

    /* Toggle Switch Styles */
    .toggle-switch-container {
      display: flex;
      align-items: center;
      gap: 1.5rem;
    }

    .toggle-switch-label {
      font-size: 2.4rem;
      color: #333;
      font-weight: 500;
    }

    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 6.25rem;
      height: 3.25rem;
      cursor: pointer;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .toggle-slider {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #e0e0e0;
      border-radius: 3.25rem;
      transition: all 0.3s ease;
      box-shadow: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      height: 2.75rem;
      width: 2.75rem;
      left: 0.25rem;
      bottom: 0.25rem;
      background-color: white;
      border-radius: 50%;
      transition: all 0.3s ease;
      box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.2);
    }

    .toggle-text {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.4rem;
      font-weight: 700;
      text-transform: uppercase;
      transition: opacity 0.3s ease;
      user-select: none;
    }

    .toggle-text-on {
      left: 0.875rem;
      color: white;
      opacity: 0;
    }

    .toggle-text-off {
      right: 0.75rem;
      color: #999;
      opacity: 1;
    }

    /* Checked state */
    .toggle-switch input:checked + .toggle-slider {
      background-color: #4ade80;
      background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    }

    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(3rem);
    }

    .toggle-switch input:checked + .toggle-slider .toggle-text-on {
      opacity: 1;
    }

    .toggle-switch input:checked + .toggle-slider .toggle-text-off {
      opacity: 0;
    }

    /* Hover effect */
    .toggle-switch:hover .toggle-slider::before {
      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
    }

    /* Focus state for accessibility */
    .toggle-switch input:focus + .toggle-slider {
      outline: 0.125rem solid #4ade80;
      outline-offset: 0.125rem;
    }

    /* Disabled state */
    .toggle-switch.disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }

    .toggle-switch.disabled input:disabled + .toggle-slider {
      cursor: not-allowed;
    }

    /* =========================================================================
       "Best viewed on mobile" — web / desktop frame
       The whole app is sized for a phone-width viewport (large touch targets,
       single-column cards). On a wide desktop window it would stretch edge to
       edge and become unreadable, so on anything that isn't a real phone we
       constrain it to a centered phone-width column (a "device frame") and show
       a dismissible banner — same idea as AppWholesaleCustomers.
       The `desktop-view` class is added to <html> by the detection script in
       Index.html; real phones never get it, so their layout is untouched.
       ========================================================================= */

    /* Banner is hidden by default; only the web frame reveals it. */
    .mobile-banner { display: none; }

    html.desktop-view {
      background: #c9ccd1;
    }

    html.desktop-view body {
      background: #c9ccd1 !important;
      padding: 0 !important;
    }

    /* The whole UI is sized for a phone (large rem values that only fit in a
       narrow viewport). Instead of re-sizing every element for desktop, we lay
       the column out at a comfortable width so nothing overflows, then scale it
       down with `zoom` — the result is the readable, phone-like rendering you get
       when the page is "reduced". The desktop root is pinned at 16px, so 55rem =
       880px; visual width = LAYOUT_WIDTH × zoom (880 × 0.5 ≈ 440px). Tweak
       `zoom` (and the matching width) to taste. */
    html.desktop-view .container {
      width: 55rem !important;
      max-width: 55rem !important;
      margin: 0 auto !important;
      zoom: 0.5;
      min-height: 200vh;          /* 200vh × 0.5 zoom = one viewport tall */
      background: #e8e8e8;
      padding: 0.5rem !important;
      box-shadow: 0 0 7.5rem rgba(0, 0, 0, 0.28);
    }

    html.desktop-view .mobile-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      max-width: 27.5rem;
      margin: 1rem auto 0.5rem;
      background: #1f2937;
      color: #f9fafb;
      padding: 0.75rem 1rem;
      border-radius: 0.625rem;
      box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.3);
    }

    html.desktop-view .mobile-banner-text {
      font-size: 1.125rem;
      line-height: 1.35;
    }

    html.desktop-view .mobile-banner-dismiss {
      flex-shrink: 0;
      background: transparent;
      border: 0.0625rem solid rgba(249, 250, 251, 0.6);
      color: #f9fafb;
      padding: 0.35rem 0.9rem;
      border-radius: 624.9375rem;
      font-size: 1rem;
      cursor: pointer;
      white-space: nowrap;
    }

    html.desktop-view .mobile-banner-dismiss:hover {
      background: rgba(249, 250, 251, 0.16);
    }

    /* Modals live outside .container (position:fixed), so they don't inherit the
       column's zoom and would otherwise fill the whole desktop screen. Give them
       the same phone-frame treatment: lay out at a comfortable width, then scale
       the whole sheet down to match the column. */
    html.desktop-view .modal-content {
      width: 55rem !important;
      max-width: 55rem !important;
      zoom: 0.5;
      max-height: 180vh !important;   /* 180vh × 0.5 zoom = 90vh visual */
    }

    /* Loading splash: the logo is absolutely positioned and, at desktop sizes,
       overlaps the page title. Drop it back into normal flow under the title. */
    html.desktop-view .loading-logo {
      position: static !important;
      transform: none !important;
      margin: 2rem auto 0 !important;
    }