:root {
      --store-page-bg: #f5f5f5;
      --store-header-bg: #ffffff;
      --store-header-text: #0f3d22;
      --store-section-text: #333333;
      --store-header-btn-bg: #ffffff;
      --store-header-btn-text: #0f3d22;
      --store-header-btn-border: #c8e6d0;
      --store-btn-bg: #0f3d22;
      --store-btn-text: #ffffff;
      --store-btn-border: transparent;
      --store-btn-outline: #0f3d22;
      --store-btn-outline-text: #0f3d22;
      --store-btn-soft-bg: color-mix(in srgb, #0f3d22 12%, white);
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont;
      background: var(--store-page-bg);
    }

    html.store-loading header {
      visibility: hidden;
    }

    html.store-loading .brand-logo-wrap {
      visibility: hidden;
    }

    header {
      background: var(--store-header-bg);
      color: var(--store-header-text);
      padding: 15px;
      font-size: 20px;
      font-weight: bold;
      position: sticky;
      top: 0;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--store-header-text);
      flex: 1;
      min-width: 0;
    }

    #brandName {
      flex: 1;
      min-width: 0;
      line-height: 1.25;
      overflow-wrap: break-word;
      word-break: break-word;
    }

    .brand-logo-wrap {
      position: relative;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--store-header-bg);
    }

    .brand-logo-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px solid var(--store-header-bg);
      pointer-events: none;
      box-sizing: border-box;
    }

    .brand-logo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transform: scale(1.02);
    }

    .cart-btn {
      background: var(--store-btn-bg);
      color: var(--store-btn-text);
      border: 1px solid var(--store-btn-border);
      border-radius: 10px;
      padding: 8px 14px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .cart-btn-badge {
      background: var(--store-header-text);
      color: var(--store-header-bg);
      font-size: 11px;
      font-weight: 700;
      min-width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      border-radius: 9px;
      padding: 0 5px;
    }

    .cart-btn-badge:empty {
      display: none;
    }

    .menu-retry-btn,
    .modal-btn,
    .coupon-apply-btn,
    .delivery-segment button.selected,
    .tip-segment button.selected,
    .paystack-test-fill-btn {
      background: var(--store-btn-bg);
      color: var(--store-btn-text);
      border: 1px solid var(--store-btn-border);
    }

    .menu-retry-btn:active,
    .modal-btn:active:not(:disabled),
    .coupon-apply-btn:active,
    .paystack-test-fill-btn:active {
      background: color-mix(in srgb, var(--store-btn-bg) 85%, black);
    }

    .branch-change-location-btn,
    .login-secondary-btn,
    .stores-link {
      background: white;
      color: var(--store-btn-outline-text);
      border: 1px solid var(--store-btn-outline);
    }

    .payment-change-address-btn,
    .login-change-address-btn {
      color: var(--store-btn-outline-text);
    }

    .track-back-link,
    .account-btn {
      flex-shrink: 0;
      background: var(--store-header-btn-bg);
      color: var(--store-header-btn-text);
      border: 1px solid var(--store-header-btn-border);
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
    }

    .track-back-link {
      text-decoration: none;
    }

    .account-btn {
      cursor: pointer;
      font-family: inherit;
      max-width: 120px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .track-back-link:active,
    .account-btn:active {
      background: var(
        --store-header-btn-bg-active,
        color-mix(in srgb, var(--store-header-btn-bg) 85%, black)
      );
    }

    .section {
      margin: 15px 0;
    }

    .section h2 {
      margin: 10px;
      color: var(--store-section-text);
    }

    .products {
      display: flex;
      overflow-x: scroll;
      padding: 10px 10px 14px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: #9aa89f #eef2ef;
    }

    .products::-webkit-scrollbar {
      height: 10px;
      -webkit-appearance: none;
    }

    .products::-webkit-scrollbar-track {
      background: #eef2ef;
      border-radius: 5px;
    }

    .products::-webkit-scrollbar-thumb {
      background: #9aa89f;
      border-radius: 5px;
    }

    .products::-webkit-scrollbar-thumb:hover {
      background: #7a8f82;
    }

    @media (min-width: 768px) {
      .products {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 200px));
        gap: 12px;
        overflow-x: visible;
        align-items: start;
      }

      .card {
        margin-right: 0;
      }

      body.store-hide-image-text .products {
        display: flex;
        overflow-x: scroll;
        gap: 0;
        padding-bottom: 14px;
      }

      body.store-hide-image-text .card {
        margin-right: 10px;
        flex-shrink: 0;
      }
    }

    .menu-status {
      padding: 16px;
      color: #666;
      font-size: 15px;
    }

    .menu-status-error {
      color: #b00020;
    }

    .menu-status-hint {
      padding: 0 16px 16px;
      font-size: 14px;
      color: #666;
    }

    .menu-retry-btn {
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }

    .branch-serving-banner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin: 0 16px 12px;
      padding: 10px 14px;
      background: #eef6f0;
      border: 1px solid #c8e6d0;
      border-radius: 10px;
      font-size: 14px;
      color: #1a3d28;
    }

    .branch-change-location-btn {
      flex-shrink: 0;
      border-radius: 8px;
      padding: 6px 10px;
      font-size: 13px;
      cursor: pointer;
      font-family: inherit;
    }

    .card {
      min-width: 180px;
      background: var(--store-page-bg);
      border-radius: 12px;
      margin-right: 10px;
      padding: 10px;
      overflow: visible;
    }

    .card img {
      width: 100%;
      height: 150px;
      object-fit: contain;
      object-position: top center;
      border-radius: 10px;
      display: block;
      background: var(--store-page-bg);
    }

    .card.card-flush-image {
      padding: 0;
      overflow: hidden;
      width: 180px;
      max-width: 180px;
    }

    .card.card-flush-image img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 0 0 10px 10px;
      background: var(--store-page-bg);
    }

    .card.card-flush-image .card-title,
    .card.card-flush-image .card-description,
    .card.card-flush-image .price {
      margin-left: 10px;
      margin-right: 10px;
    }

    .card.card-flush-image .card-title {
      margin-top: 8px;
    }

    .card.card-flush-image .add-to-cart,
    .card.card-flush-image .sold-out-btn {
      display: block;
      box-sizing: border-box;
      margin: 12px 0 10px;
      width: 100%;
      border-radius: 8px;
    }

    .card-title {
      margin-top: 6px;
      font-size: 13px;
      line-height: 1.35;
      overflow: visible;
    }

    .card-description {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1.4;
      color: #666;
    }

    body.store-hide-image-text .card .card-title,
    body.store-hide-image-text .card .card-description,
    body.store-hide-image-text .card .price {
      display: none !important;
    }

    .price {
      font-weight: bold;
      margin-top: 5px;
    }

    .add-to-cart {
      width: calc(100% + 10px);
      background: var(--store-btn-bg);
      color: var(--store-btn-text);
      border: 1px solid var(--store-btn-border);
      padding: 10px 12px;
      border-radius: 8px;
      text-align: center;
      margin: 23px 0 0 -5px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      box-sizing: border-box;
    }

    .add-to-cart:active {
      background: color-mix(in srgb, var(--store-btn-bg) 85%, black);
    }

    .card.sold-out img {
      filter: grayscale(40%);
    }

    .sold-out-btn {
      width: calc(100% + 10px);
      background: #e9ecea;
      color: #7a847c;
      border: 1px solid #d5dbd7;
      padding: 10px 12px;
      border-radius: 8px;
      text-align: center;
      margin: 23px 0 0 -5px;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: not-allowed;
      box-sizing: border-box;
    }

    @media (max-width: 767px) {
      .card {
        min-width: 155px;
        max-width: 155px;
      }

      .card.card-flush-image {
        width: 155px;
        max-width: 155px;
      }

      .card.card-flush-image,
      body.store-hide-image-text .card.card-flush-image,
      body.store-hide-image-text .card.card-image-only,
      body.store-hide-image-text .products .card {
        padding: 0;
        overflow: hidden;
        flex-shrink: 0;
      }

      .card.card-flush-image img,
      body.store-hide-image-text .card.card-flush-image img,
      body.store-hide-image-text .card.card-image-only img,
      body.store-hide-image-text .products .card img {
        width: 100%;
        height: auto;
        border-radius: 0 0 10px 10px;
        background: var(--store-page-bg);
        display: block;
      }

      .card.card-flush-image .card-title {
        font-size: 12px;
        line-height: 1.3;
        margin-top: 6px;
      }

      .card.card-flush-image .card-description {
        font-size: 11px;
      }

      .card.card-flush-image .price {
        font-size: 13px;
        margin-top: 4px;
      }

      .card .add-to-cart,
      .card .sold-out-btn {
        width: 100%;
        margin: 12px 0 0;
      }

      .card.card-flush-image .add-to-cart,
      .card.card-flush-image .sold-out-btn,
      .card.card-flush-image.card-image-only .add-to-cart,
      .card.card-flush-image.card-image-only .sold-out-btn,
      body.store-hide-image-text .card.card-image-only .add-to-cart,
      body.store-hide-image-text .card.card-image-only .sold-out-btn,
      body.store-hide-image-text .products .card .add-to-cart,
      body.store-hide-image-text .products .card .sold-out-btn {
        width: 100%;
        margin: 12px 0 10px;
        border-radius: 8px;
      }
    }

    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 20;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal {
      background: white;
      width: 100%;
      max-width: 420px;
      max-height: 85vh;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px;
      border-bottom: 1px solid #eee;
      font-size: 18px;
      font-weight: bold;
    }

    .modal-close {
      background: none;
      border: none;
      font-size: 24px;
      line-height: 1;
      cursor: pointer;
      color: #666;
      padding: 4px 8px;
    }

    .address-form {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      overflow-y: auto;
    }

    .address-field label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 6px;
      color: #333;
    }

    .address-field input,
    .address-field textarea {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
      font-family: inherit;
    }

    .address-field textarea {
      min-height: 72px;
      resize: vertical;
    }

    .address-search-wrap {
      position: relative;
    }

    .address-search-hint {
      font-size: 12px;
      color: #888;
      margin-top: 4px;
    }

    .address-distance-label {
      margin: 0 16px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #0f3d22;
      text-align: center;
      line-height: 1.4;
    }

    .address-distance-label.distance-fee-applies {
      color: #7a5f00;
    }

    .saved-address-panel {
      margin-bottom: 16px;
    }

    .saved-address-panel .saved-address-btn {
      width: 100%;
      margin-top: 12px;
      margin-bottom: 10px;
    }

    .saved-address-panel strong {
      margin-bottom: 0;
    }

    .saved-address-or {
      margin: 0;
      text-align: center;
      font-size: 12px;
      color: #888;
    }

    .modal-footer {
      padding: 16px;
      border-top: 1px solid #eee;
      background: #fafafa;
    }

    .modal-btn {
      width: 100%;
      border-radius: 10px;
      padding: 14px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }

    .pac-container {
      z-index: 10000 !important;
    }

    .cart-items {
      flex: 1;
      overflow-y: auto;
      padding: 8px 16px;
    }

    .cart-empty {
      color: #888;
      text-align: center;
      padding: 32px 16px;
    }

    .cart-item {
      display: flex;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      align-items: center;
    }

    .cart-item img {
      width: 56px;
      height: 56px;
      object-fit: contain;
      border-radius: 8px;
      background: #f9f9f9;
      flex-shrink: 0;
    }

    .cart-item-info {
      flex: 1;
      min-width: 0;
    }

    .cart-item-name {
      font-size: 14px;
      font-weight: 600;
      line-height: 1.3;
    }

    .cart-item-meta {
      font-size: 13px;
      color: #666;
      margin-top: 4px;
    }

    .cart-item-remove {
      background: none;
      border: none;
      color: #c00;
      font-size: 13px;
      cursor: pointer;
      padding: 4px;
      flex-shrink: 0;
    }

    .cart-popup-total {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 12px;
    }

    .modal-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    #optionsOverlay {
      z-index: 30;
    }

    .options-hero {
      background: #fafafa;
      border-bottom: 1px solid #eee;
      flex-shrink: 0;
    }

    .options-hero img {
      width: 100%;
      max-height: 160px;
      object-fit: contain;
      display: block;
    }

    .options-body {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
    }

    .options-group {
      padding: 16px;
      border-bottom: 1px solid #eee;
    }

    .options-group-title {
      color: #0f3d22;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .options-group-hint {
      color: #666;
      font-size: 13px;
      margin-bottom: 12px;
    }

    .options-row {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f0;
      cursor: default;
    }

    .options-row:last-child {
      border-bottom: none;
    }

    .options-row.selectable {
      cursor: pointer;
    }

    .options-row.sold-out {
      opacity: 0.5;
    }

    .options-check {
      width: 22px;
      height: 22px;
      border: 2px solid var(--store-btn-outline);
      border-radius: 4px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--store-btn-outline-text);
      font-size: 14px;
      font-weight: bold;
    }

    .options-check.selected {
      background: var(--store-btn-bg);
      color: var(--store-btn-text);
      border-color: var(--store-btn-bg);
    }

    .options-radio {
      width: 22px;
      height: 22px;
      border: 2px solid var(--store-btn-outline);
      border-radius: 50%;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .options-radio.selected::after {
      content: "";
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--store-btn-bg);
    }

    .options-row-main {
      flex: 1;
      min-width: 0;
    }

    .options-row-name {
      color: #222;
      font-size: 15px;
      font-weight: 500;
    }

    .options-row-price {
      color: #666;
      font-size: 13px;
      margin-top: 2px;
    }

    .options-qty {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 8px;
    }

    .options-qty button {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 2px solid var(--store-btn-outline);
      background: transparent;
      color: var(--store-btn-outline-text);
      font-size: 18px;
      cursor: pointer;
      line-height: 1;
      padding: 0;
    }

    .options-qty button:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    .options-qty span {
      color: #222;
      min-width: 20px;
      text-align: center;
      font-weight: 600;
    }

    .variable-price-panel {
      padding: 20px 16px 24px;
      text-align: center;
    }

    .variable-price-message {
      margin: 0 0 20px;
      color: #0f3d22;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.4;
    }

    .variable-price-label {
      display: block;
      margin-bottom: 8px;
      color: #3d8b5c;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .variable-price-input {
      box-sizing: border-box;
      width: 100%;
      max-width: 220px;
      margin: 0 auto;
      display: block;
      border: none;
      border-bottom: 1px solid #c5d0c8;
      padding: 10px 8px;
      font-size: 22px;
      font-weight: 600;
      text-align: center;
      color: #0f3d22;
      background: transparent;
      font-family: inherit;
    }

    .variable-price-input:focus {
      outline: none;
      border-bottom-color: var(--store-btn-outline);
    }

    .variable-price-input::placeholder {
      color: #9aa89f;
      font-size: 16px;
      font-weight: 500;
    }

    .options-summary {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      margin-bottom: 12px;
    }

    #deliveryOverlay {
      z-index: 25;
    }

    .delivery-body {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      min-height: 0;
    }

    .delivery-section {
      margin-bottom: 20px;
    }

    .delivery-section:last-child {
      margin-bottom: 0;
    }

    .delivery-section-label {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 8px;
      color: #333;
    }

    .delivery-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .delivery-chip {
      border: 1px solid #ddd;
      background: white;
      color: #333;
      border-radius: 999px;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
    }

    .delivery-chip.selected {
      border-color: var(--store-btn-outline);
      background: var(--store-btn-soft-bg);
      color: var(--store-btn-outline-text);
      font-weight: 600;
    }

    .delivery-segment {
      display: flex;
      border: 1px solid #ddd;
      border-radius: 10px;
      overflow: hidden;
      background: #fafafa;
    }

    .delivery-segment button {
      flex: 1;
      border: none;
      background: transparent;
      color: #444;
      padding: 12px 8px;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
    }

    .delivery-segment button.selected {
      font-weight: 600;
    }

    .delivery-instructions-input {
      width: 100%;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      color: #222;
      font-size: 15px;
      font-family: inherit;
      margin-top: 10px;
      background: white;
    }

    .delivery-instructions-input::placeholder {
      color: #999;
    }

    .delivery-instructions-input:focus {
      outline: none;
      border-color: var(--store-btn-outline);
    }

    .coupon-row {
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 4px 4px 4px 12px;
      gap: 8px;
      background: white;
    }

    .coupon-row input {
      flex: 1;
      border: none;
      background: transparent;
      color: #222;
      font-size: 14px;
      font-family: inherit;
      min-width: 0;
    }

    .coupon-row input::placeholder {
      color: #999;
    }

    .coupon-row input:focus {
      outline: none;
    }

    .coupon-apply-btn {
      border-radius: 8px;
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      flex-shrink: 0;
    }

    .coupon-message {
      font-size: 12px;
      margin-top: 8px;
      color: var(--store-btn-outline-text);
      min-height: 16px;
    }

    .tip-segment {
      display: flex;
      border: 1px solid #ddd;
      border-radius: 10px;
      overflow: hidden;
      background: #fafafa;
    }

    .tip-segment button {
      flex: 1;
      border: none;
      background: transparent;
      color: #444;
      padding: 12px 4px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      font-family: inherit;
    }

    .tip-segment button.selected {
      font-weight: 700;
    }

    .payment-address-line {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid #eee;
      font-size: 13px;
      line-height: 1.4;
      color: #444;
    }

    .payment-change-address-btn {
      flex-shrink: 0;
      padding: 0;
      border: none;
      background: none;
      font-size: 13px;
      font-weight: 600;
      text-decoration: underline;
      cursor: pointer;
      font-family: inherit;
    }

    #paymentOverlay {
      z-index: 26;
    }

    .payment-body {
      padding: 16px;
      overflow-y: auto;
    }

    .payment-line {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      font-size: 15px;
      border-bottom: 1px solid #f0f0f0;
    }

    .payment-line.total {
      font-weight: bold;
      font-size: 17px;
      border-bottom: none;
      padding-top: 12px;
      margin-top: 4px;
    }

    .payment-hint {
      font-size: 13px;
      color: #666;
      margin: 12px 0 0;
      text-align: center;
    }

    .paystack-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 16px;
      padding: 12px;
      background: #f5f5f5;
      border-radius: 8px;
      font-size: 13px;
      color: #444;
    }

    .paystack-test-panel {
      margin-top: 16px;
      padding: 12px;
      background: #fff8e6;
      border: 1px solid #f0d78c;
      border-radius: 10px;
      font-size: 13px;
      color: #5c4a12;
    }

    .paystack-test-panel h4 {
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 700;
      color: #7a5f00;
    }

    .paystack-test-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .paystack-test-row:last-of-type {
      border-bottom: none;
    }

    .paystack-test-row code {
      font-family: ui-monospace, monospace;
      font-size: 12px;
      color: #333;
    }

    .paystack-test-copy {
      background: #fff;
      border: 1px solid #e0c96a;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      cursor: pointer;
      color: #7a5f00;
      flex-shrink: 0;
    }

    .paystack-test-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .paystack-test-fill-btn {
      flex: 1;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }

    .paystack-test-note {
      margin: 8px 0 0;
      font-size: 11px;
      line-height: 1.4;
      color: #7a6a3a;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .stores-link {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      white-space: nowrap;
    }

    .stores-page {
      max-width: 720px;
      margin: 0 auto;
      padding: 16px;
    }

    .stores-page h1 {
      margin: 0 0 6px;
      font-size: 24px;
    }

    .stores-page .stores-sub {
      margin: 0 0 20px;
      color: #666;
      font-size: 14px;
    }

    .store-list {
      display: grid;
      gap: 12px;
    }

    .store-card {
      display: flex;
      align-items: center;
      gap: 14px;
      background: white;
      border-radius: 14px;
      padding: 14px;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .store-card img {
      width: 56px;
      height: 56px;
      object-fit: contain;
      border-radius: 10px;
      background: #f5f5f5;
    }

    .store-card-main {
      flex: 1;
      min-width: 0;
    }

    .store-card-name {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .store-card-meta {
      font-size: 13px;
      color: #666;
    }

    .store-card-cta {
      font-size: 13px;
      font-weight: 700;
      color: #0f3d22;
    }

    .stores-empty,
    .stores-error {
      padding: 16px;
      background: white;
      border-radius: 12px;
      color: #666;
    }

    .stores-error {
      color: #b00020;
    }

    .login-body {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .login-address-section {
      padding: 14px 16px 0;
      border-bottom: 1px solid #eee;
      margin-bottom: 4px;
    }

    .login-address-label {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #666;
      margin-bottom: 6px;
    }

    .login-address-name {
      display: block;
      margin: 0 0 4px;
      color: #0f3d22;
      font-size: 16px;
      line-height: 1.4;
    }

    .login-address-summary {
      margin: 0 0 10px;
      font-size: 14px;
      line-height: 1.45;
      color: #222;
    }

    .login-delivery-distance {
      margin: 0 0 10px;
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      color: #0f3d22;
    }

    .login-delivery-distance.long-range-fee {
      color: #7a5f00;
    }

    .login-change-address-btn {
      display: block;
      width: 100%;
      margin: 0 0 14px;
      padding: 0;
      border: none;
      background: none;
      font-size: 14px;
      font-weight: 600;
      text-decoration: underline;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
    }

    .login-hint {
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
      color: #555;
    }

    .login-error {
      font-size: 13px;
      color: #b00020;
      min-height: 18px;
    }

    .login-error:empty {
      min-height: 0;
      display: none;
    }

    .login-signed-in-card {
      background: #f3faf5;
      border: 1px solid #c8e6d0;
      border-radius: 10px;
      padding: 14px;
    }

    .login-signed-in-label {
      margin-bottom: 8px;
      color: #666;
    }

    .login-signed-in-card strong {
      display: block;
      color: #0f3d22;
      font-size: 16px;
      line-height: 1.4;
    }

    .login-signed-in-address {
      margin: 4px 0 0;
      font-size: 14px;
      line-height: 1.45;
      color: #333;
    }

    .login-signed-in-card .login-delivery-distance {
      margin: 8px 0 0;
    }

    .login-secondary-btn {
      width: 100%;
      border-radius: 10px;
      padding: 12px;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }

    .login-modal-footer {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .login-modal-footer .login-secondary-btn,
    .login-modal-footer .modal-btn {
      margin: 0;
    }

    .login-modal-footer[hidden] {
      display: none !important;
    }

    .confirm-modal-body {
      padding: 16px;
    }

    .confirm-modal-body p {
      margin: 0;
      font-size: 15px;
      line-height: 1.5;
      color: #444;
    }

    .confirm-modal-footer {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .confirm-modal-footer .login-secondary-btn {
      margin-top: 0;
    }

    .modal-btn:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    #loginRecaptcha {
      min-height: 78px;
      display: flex;
      justify-content: center;
    }

    #loginRecaptcha:empty {
      min-height: 0;
      display: none;
    }

    .payment-success-overlay {
      z-index: 30;
    }

    .payment-success-card {
      background: #2f3438;
      border: 2px solid rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      padding: 28px 24px 24px;
      width: 100%;
      max-width: 420px;
      max-height: 85vh;
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
      color: #fff;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .payment-success-title {
      margin: 0 0 20px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }

    .payment-success-check {
      width: 72px;
      height: 72px;
      margin: 0 auto 20px;
      border-radius: 50%;
      background: #2ecc71;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 38px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
    }

    .payment-success-time {
      margin: 0;
      font-size: 42px;
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .payment-success-day {
      margin: 10px 0 0;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.72);
      line-height: 1.35;
    }

    #paymentSuccessOrderNo {
      margin-top: 6px;
      color: #fff;
      font-weight: 700;
    }

    .payment-success-meta {
      margin: 16px 0 0;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.55);
      line-height: 1.4;
    }

    .payment-success-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
      width: 100%;
    }

    .payment-success-done,
    .payment-success-track {
      box-sizing: border-box;
      width: 100%;
      border-radius: 12px;
      padding: 12px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      line-height: 1.2;
    }

    .payment-success-done {
      margin: 0;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.25);
    }

    .payment-success-done:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .payment-success-track {
      display: block;
      margin: 0;
      background: #2ecc71;
      color: #2f3438;
      border: 2px solid #fff;
      border-radius: 12px;
      padding: 12px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      line-height: 1.2;
      text-align: center;
      text-decoration: none;
    }

    .payment-success-track:hover {
      background: #27ae60;
      color: #2f3438;
      border-color: #fff;
    }

    .payment-success-track:active {
      background: #219a52;
      color: #2f3438;
      border-color: #fff;
    }

    .payment-success-actions .payment-success-track[hidden] {
      display: none !important;
    }

    .track-page {
      background: var(--store-page-bg);
    }

    .track-app {
      max-width: 520px;
      margin: 0 auto;
      padding: 16px 16px 0;
    }

    .track-lookup,
    .track-panel {
      background: #fff;
      border-radius: 16px;
      padding: 20px;
      box-shadow: 0 2px 12px rgba(15, 61, 34, 0.08);
    }

    .track-lookup-title {
      margin: 0 0 8px;
      font-size: 24px;
      color: #0f3d22;
    }

    .track-lookup-hint {
      margin: 0 0 18px;
      color: #666;
      font-size: 14px;
      line-height: 1.45;
    }

    .track-lookup-form {
      display: grid;
      gap: 10px;
    }

    .track-lookup-label {
      font-size: 13px;
      font-weight: 600;
      color: #333;
    }

    .track-lookup-input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #d8e0da;
      border-radius: 10px;
      padding: 12px;
      font-size: 16px;
      font-family: inherit;
    }

    .track-lookup-btn {
      margin-top: 4px;
    }

    .track-error {
      margin: 14px 0 0;
      color: #b00020;
      font-size: 14px;
    }

    .track-hero {
      background: var(--store-header-bg);
      color: var(--store-header-text);
      border-radius: 18px;
      padding: 20px;
      margin-bottom: 14px;
      box-shadow: 0 8px 24px color-mix(in srgb, var(--store-header-bg) 35%, transparent);
    }

    .track-hero-summary {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .track-hero-tracking {
      width: 100%;
      margin-top: 18px;
    }

    .track-hero-label,
    .track-hero-time,
    .track-hero-order-no {
      margin: 0;
    }

    .track-hero-label {
      font-size: 14px;
      opacity: 0.85;
    }

    .track-hero-time {
      font-size: 40px;
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    .track-hero-order-no {
      margin-top: 4px;
      font-size: 17px;
      color: var(--store-track-order-no-color, var(--store-btn-text));
      font-weight: 700;
      line-height: 1.35;
    }

    .track-panel-title {
      margin: 0 0 16px;
      font-size: 18px;
      color: #0f3d22;
    }

    .track-hero .track-panel-title {
      color: var(--store-header-text);
      opacity: 0.92;
    }

    .track-empty {
      margin: 0;
      color: #666;
      font-size: 14px;
    }

    .track-hero .track-empty {
      color: color-mix(in srgb, var(--store-header-text) 72%, transparent);
    }

    .track-timeline {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .track-step {
      --track-time-col: 42px;
      --track-marker-col: 28px;
      --track-col-gap: 12px;
      display: grid;
      grid-template-columns: var(--track-time-col) var(--track-marker-col) 1fr;
      gap: 8px var(--track-col-gap);
      position: relative;
      padding-bottom: 22px;
    }

    .track-step:last-child {
      padding-bottom: 0;
    }

    .track-step:not(:last-child)::before {
      content: "";
      position: absolute;
      left: calc(var(--track-time-col) + var(--track-col-gap) + (var(--track-marker-col) / 2));
      transform: translateX(-50%);
      top: 28px;
      bottom: 0;
      width: 2px;
      background: #d8e0da;
    }

    .track-step--complete:not(:last-child)::before {
      background: var(--store-track-marker-color, var(--store-btn-bg));
    }

    .track-step-marker {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #c5d0c8;
      background: #fff;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;
      grid-column: 2;
      justify-self: center;
    }

    .track-step--complete .track-step-marker {
      background: var(--store-track-marker-bg, var(--store-track-marker-color, var(--store-btn-bg)));
      border-color: var(--store-track-marker-bg, var(--store-track-marker-color, var(--store-btn-bg)));
      color: var(--store-track-marker-tick-color, #ffffff);
    }

    .track-step--current .track-step-marker {
      border-color: var(--store-track-marker-color, var(--store-btn-bg));
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--store-track-marker-color, var(--store-btn-bg)) 18%, white);
    }

    .track-step-body {
      grid-column: 3;
      min-width: 0;
    }

    .track-step-title {
      display: block;
      font-size: 15px;
      color: #1a1a1a;
    }

    .track-step--pending .track-step-title {
      color: #8a948d;
    }

    .track-hero .track-step-title {
      display: block;
      font-size: 15px;
      font-weight: 600;
      color: var(--store-header-text);
      background: none;
      padding: 0;
      border-radius: 0;
      line-height: 1.3;
    }

    .track-hero .track-step--pending .track-step-title {
      color: var(--store-header-text);
      opacity: 0.55;
    }

    .track-step-time {
      grid-column: 1;
      align-self: start;
      padding-top: 5px;
      font-size: 13px;
      color: var(--store-btn-outline-text);
      font-weight: 600;
      white-space: nowrap;
      text-align: right;
    }

    .track-step-time--empty {
      visibility: hidden;
    }

    .track-hero .track-step-time {
      color: var(--store-header-text);
      opacity: 0.92;
    }

    .track-step-message,
    .track-step-message2 {
      margin: 4px 0 0;
      font-size: 13px;
      line-height: 1.4;
      color: #555;
    }

    .track-step--pending .track-step-message,
    .track-step--pending .track-step-message2 {
      color: #8a948d;
    }

    .track-step-message2 {
      color: #666;
    }

    .track-hero .track-step-message,
    .track-hero .track-step-message2 {
      color: color-mix(in srgb, var(--store-header-text) 82%, transparent);
    }

    .track-hero .track-step--pending .track-step-message,
    .track-hero .track-step--pending .track-step-message2 {
      color: color-mix(in srgb, var(--store-header-text) 52%, transparent);
    }

    .track-hero-map-host {
      width: 100%;
      margin-top: 18px;
    }

    .track-hero-map-host[hidden] {
      display: none !important;
    }

    #trackMapSection.track-hero-map,
    .track-hero-map {
      max-width: none;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    .track-map-section {
      max-width: 520px;
      margin: 0 auto;
      padding: 16px 16px 32px;
    }

    .track-map {
      width: 100%;
      height: min(52vh, 360px);
      border-radius: 16px;
      overflow: hidden;
      background: #d8e0da;
      box-shadow: 0 2px 12px rgba(15, 61, 34, 0.08);
    }

    .track-map-status {
      margin: 10px 2px 0;
      font-size: 13px;
      color: #4a5d51;
      text-align: center;
    }

    .track-hero .track-map {
      border-radius: 14px;
      box-shadow: none;
      background: color-mix(in srgb, var(--store-header-text) 8%, transparent);
    }

    .track-hero .track-map-status {
      margin: 10px 0 0;
      color: color-mix(in srgb, var(--store-header-text) 78%, transparent);
    }

    .login-host-hint {
      font-size: 12px;
      color: #888;
      margin: 0;
    }

    .login-host-hint code {
      font-size: 11px;
      background: #f4f4f4;
      padding: 2px 6px;
      border-radius: 4px;
    }