/* -----------------------------------------------------------
   Rayu UI Overrides — consistent typography & spacing
   Load AFTER styles.css and ui-dropdown.css
   ----------------------------------------------------------- */

/* 0) Type scale (clamp = responsive) */
:root{
  --rayu-h2: clamp(1.25rem, 1.05rem + 1.2vw, 2rem);
  --rayu-h3: clamp(1rem, .94rem + .6vw, 1.25rem);
  --rayu-body: clamp(.92rem, .86rem + .35vw, 1.05rem);
  --rayu-small: clamp(.82rem, .78rem + .25vw, .95rem);

  --rayu-brand: #d32f2f;
  --rayu-accent: #ffb74d;
  --rayu-ink: #222;
  --rayu-muted: #666;
  --rayu-border: #ececec;
  --rayu-card: #fff;
  --rayu-shadow: 0 4px 16px rgba(0,0,0,.08);
}

/* 1) Section titles */
.category-title{
  font-size: var(--rayu-h2) !important;
  line-height: 1.15;
  gap: .6rem !important;
  margin: 1.25rem 0 1.1rem !important;
}
.category-title i{ color: var(--rayu-accent) !important; }

/* 2) Grid rhythm */
.items-grid{
  gap: 16px !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
}
@media (max-width:1024px){ .items-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:640px){ .items-grid{ grid-template-columns: 1fr !important; } }

/* 3) Cards: tidy & uniform */
.menu-item{
  background: var(--rayu-card) !important;
  border: 1px solid var(--rayu-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--rayu-shadow) !important;
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  gap: 14px !important;
  padding: 14px !important;
  align-items: start !important;
}
.menu-item .item-icon{
  display:flex;align-items:center;justify-content:center;
  font-size: 28px !important; color: var(--rayu-accent) !important;
}
.menu-item .item-image{ display:none !important; } /* kill legacy images */

/* Title + body text */
.menu-item h3{
  font-size: var(--rayu-h3) !important;
  color: var(--rayu-brand) !important;
  margin: 0 0 .35rem !important;
  line-height: 1.25 !important;
}
.item-description{
  font-size: var(--rayu-small) !important;
  color: var(--rayu-muted) !important;
  margin: 0 0 .6rem !important;
}

/* 4) Dropdown + labels */
.size-label{
  font-size: var(--rayu-small) !important;
  color: var(--rayu-ink) !important;
  margin: .4rem 0 .35rem !important;
}
.size-select{
  width: 100%;
  border: 2px solid #e6e6e6 !important;
  border-radius: 10px !important;
  padding: .55rem .7rem !important;
  font-size: var(--rayu-body) !important;
  line-height: 1.2 !important;
  background: #fff !important;
  appearance: none;
}

/* 5) Buttons */
.add-btn{
  margin-top: .6rem !important;
  border-radius: 10px !important;
  padding: .6rem .9rem !important;
  font-weight: 700 !important;
  font-size: var(--rayu-body) !important;
  background: #d32f2f !important;
  color:#fff !important;
  width: 100%;
}
.add-btn:hover{ filter: brightness(1.08); }

/* 6) Per‑piece row alignment */
.per-piece-pricing{
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin: .25rem 0 .35rem !important;
}
.price-display{
  font-weight: 700 !important;
  font-size: var(--rayu-body) !important;
  color: #ff5722 !important;
}
.quantity-section{
  display: grid !important;
  grid-auto-flow: column !important;
  gap: 8px !important;
  align-items: center !important;
  font-size: var(--rayu-small) !important;
}
.qty-input{
  width: 82px !important;
  padding: .45rem .55rem !important;
  border-radius: 10px !important;
  border: 2px solid #e6e6e6 !important;
  text-align: center !important;
  font-size: var(--rayu-body) !important;
}

/* 7) Mobile polish */
@media (max-width:640px){
  .menu-item{ grid-template-columns: 40px 1fr !important; padding: 12px !important; }
  .menu-item .item-icon{ font-size: 24px !important; }
  .category-title{ margin: .75rem 0 .6rem !important; }
  .menu-header{ padding: 1.6rem 1rem !important; }
  .tray-info{ padding: 1rem !important; }
}

/* 8) Cart badge – keep tidy on mobile header */
.rayu-cart-count{ font-size:.9em !important; padding: 0 6px !important; top:-6px !important; }

/* 9) Footer link color for contrast */
.site-footer a{ color: var(--rayu-accent) !important; text-decoration: underline; }