:root {
	--display-font-family: Lalezar;
	--body-font-family: Hind;

	--font-size: 16px

	--logo-padding: 20px;
	--logo-height: 100px;

	--header-width: 1366px;
	--header-border-position: bottom;
	--header-border-size: 1px;
	--header-bg-color: 0 0 0;
	--header-border-color: 0 0 0;

	--brand-color: 99 13 13;
	--brand-color-inverted: 255 15 ;

	--background-color: 255 15 ;
	--text-color: 61 61 61;
	--link-color: 61 61 61;

	--action-color: 0 122 130;
	--action-color-inverted: 255 15 ;

	--announcement-bar-bg-color: 99 13 13;
	--announcement-bar-text-color: 255 255 255;
	--announcement-bar-link-color: 12 148 130;

	--main-navigation-bg-color: 0 0 0;
	--main-navigation-link-color: 255 255 255;
	--main-navigation-link-color-hover: 119 9 8;
	--main-navigation-link-bg-color: 44 81 112;
	--main-navigation-link-font-size: 16px;
	--main-navigation-link-alignment: center;

	--auxiliary-bg-color: transparent;
	--auxiliary-border-color: transparent;
	--auxiliary-link-color: 178 175 175;

	--order-status-bg-color: 245 245 245;
	--order-status-color: 162 162 162;

	--store-menu-bg_color: 248 248 248;
	--store-menu-color: 119 7 ;

	--footer-bg-color: 32 32 32;
	--footer-color: 255 15 ;
	--footer-link-color: 255 15 ;
}

/*Custom Styles*/
@media (max-width: 768px) {

  /* ---------- Modal: bottom sheet ---------- */
  .mm-modal {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* Only use flex while the modal is open */
  .mm-modal:not([style*="display: none"]) {
    display: flex !important;
  }

  /* Stay hidden when closed */
  .mm-modal[style*="display: none"] {
    display: none !important;
  }

  /* ---------- Header / close button ---------- */
  .mm-header {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10 !important;
    padding: 0 !important;
  }

  .mm-close-btn {
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
  }

  /* ---------- Body: stacks vertically and scrolls ---------- */
  .mm-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---------- Image on top ---------- */
  .mm-left {
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    flex: 0 0 auto !important;
  }

  .mm-left img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  /* ---------- Content ---------- */
  .mm-right {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    display: block !important;
    height: auto !important;
  }

  .mm-right-content {
    padding: 0 !important;
    height: auto !important;
  }

  .mm-title {
    font-size: 20px !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
  }

  .mm-price {
    font-size: 18px !important;
    margin-bottom: 8px !important;
  }

  .mm-description {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
  }

  /* ---------- Modifiers: let the whole body scroll ---------- */
  .mm-modifiers,
  .mm-modifiers-scroll {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .mm-modifier-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 0 !important;
  }

  .mm-modifier-title {
    font-size: 15px !important;
  }

  .mm-modifier-price {
    font-size: 13px !important;
  }

  /* Larger tap target for checkboxes */
  .mm-checkbox {
    flex: 0 0 auto !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }

  .mm-checkbox-icon {
    width: 26px !important;
    height: 26px !important;
  }

  /* ---------- Note + quantity ---------- */
  .mm-right-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px 0 0 !important;
    margin-top: 12px !important;
  }

  .mm-note-wrap,
  .mm-note {
    width: 100% !important;
  }

  .mm-note {
    min-height: 60px !important;
    font-size: 16px !important; /* prevents iOS zoom on focus */
    box-sizing: border-box !important;
  }

  .mm-quantity {
    display: flex !important;
    justify-content: center !important;
  }

  .mm-quantity-btn {
    width: 44px !important;
    height: 44px !important;
  }

  .mm-quantity-value {
    min-width: 44px !important;
    font-size: 16px !important;
    text-align: center !important;
  }

  /* ---------- Sticky Add to Cart footer ---------- */
  .mm-footer {
    flex: 0 0 auto !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
  }

  .mm-add {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
}

/* ---------- Extra small phones ---------- */
@media (max-width: 380px) {
  .mm-left { height: 180px !important; }
  .mm-title { font-size: 18px !important; }
}