/* =====================================================================
   MOON BAR — MenuCard (Milestone 7B)
   One component for every product. Photo dominates; text is HTML.
   Uses the existing Moon Resort tokens from styles.css (--sunset, --cream, --bamboo-a/b, --sans).
   No new image assets: wood, bamboo and gold are drawn with CSS only.
   ===================================================================== */
.mc-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:22px;   /* short rows stay centred, never left-aligned gaps */
  max-width:440px;margin:0 auto;
}
.mc-grid > *{flex:0 1 100%}
@media (min-width:700px){.mc-grid{max-width:820px;gap:24px}.mc-grid > *{flex-basis:calc((100% - 24px) / 2)}}
@media (min-width:1100px){.mc-grid{max-width:1280px;gap:28px}.mc-grid > *{flex-basis:calc((100% - 56px) / 3)}}

/* ---- large photo card ---- */
.mc{
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:14px;
  background:linear-gradient(180deg,#2c1a0e 0%,#21130a 100%);
  box-shadow:0 0 0 1px rgba(233,190,110,.28),0 14px 30px rgba(0,0,0,.5);
}
.mc-photo{position:relative;aspect-ratio:31/40;  /* 0.775: between the 3:4 (round 1) and 4:5 (round 2) photos -> at most 4 % trimmed */
  overflow:hidden;background:#140a04}
.mc-photo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.mc-photo img.is-fill{object-fit:cover;object-position:50% 0%}
/* restrained bamboo detail: a single slim cane with nodes between photo and text */
.mc-photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:6px;z-index:1;
  background:
    repeating-linear-gradient(90deg,transparent 0 58px,rgba(70,40,10,.85) 58px 60px,transparent 60px 62px),
    linear-gradient(180deg,#f0d08a 0%,var(--bamboo-a,#C9A35E) 45%,var(--bamboo-b,#8C6A33) 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.5);
}
.mc-num{
  position:absolute;z-index:2;top:12px;left:12px;padding:5px 9px 4px;border-radius:7px;
  font:500 15px/1 var(--sans,"Oswald","Arial Narrow",sans-serif);letter-spacing:.12em;color:#f6d58c;
  background:rgba(20,10,4,.72);box-shadow:0 0 0 1px rgba(246,213,140,.45);backdrop-filter:blur(2px);
}
.mc-body{display:flex;flex:1;flex-direction:column;padding:16px 18px 16px}
.mc-name{
  margin:0;font:500 clamp(22px,5.6vw,25px)/1.1 var(--sans,"Oswald","Arial Narrow",sans-serif);
  letter-spacing:.05em;text-transform:uppercase;color:#fff3dc;overflow-wrap:anywhere;
}
.mc-desc{
  margin:7px 0 0;font:italic 400 16px/1.42 Georgia,"Times New Roman",serif;color:#dcc6a0;
}
.mc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;
  border-top:1px solid rgba(233,190,110,.16)}
.mc-price{font:500 28px/1 var(--sans,"Oswald",sans-serif);letter-spacing:.02em;color:var(--sunset,#F4A23C);white-space:nowrap}
.mc-avail{display:inline-flex;align-items:center;gap:7px;font:400 13px/1 var(--sans,"Oswald",sans-serif);
  letter-spacing:.14em;text-transform:uppercase;color:#cdb894}
.mc-avail::before{content:"";width:8px;height:8px;border-radius:50%;background:#7fbf6a;box-shadow:0 0 6px rgba(127,191,106,.7)}
.mc-avail--out{display:none;color:#f0b9a8}
.is-soldout .mc-avail--in{display:none}
.is-soldout .mc-avail--out{display:inline-flex}
.mc-avail--hidden{color:#a99476}
.mc-avail--hidden::before{background:transparent;box-shadow:inset 0 0 0 1.5px #a99476}
.mc-avail--out::before{background:#c8553d;box-shadow:none}

/* ---- SOLD OUT: product stays visible and readable, photo dimmed ---- */
.is-soldout .mc-photo img{filter:saturate(.25) brightness(.62)}
/* stamp: rendered by MenuCard for the snapshot, or appended as .so-label by the live refresh in app.js */
.mc-photo .so-label,.mc-so{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);
  padding:9px 18px 8px;border:2px solid #f6d58c;border-radius:8px;background:rgba(20,10,4,.78);box-shadow:none;
  font:500 22px/1 var(--sans,"Oswald",sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#f6d58c;white-space:nowrap;
}
.mc-c .so-label,.mc-r .so-label{position:static;transform:none;display:inline-block;align-self:flex-start;margin-top:2px;
  padding:4px 8px 3px;border:1px solid #f0b9a8;border-radius:5px;background:transparent;box-shadow:none;
  font:500 12px/1 var(--sans,"Oswald",sans-serif);letter-spacing:.14em;text-transform:uppercase;color:#f0b9a8}
.mc-c .so-label{display:none}                       /* compact card already says "Sold out" beside the price */
.mc-c.is-soldout .mc-avail--out{display:inline-flex}
.is-soldout .mc-price{color:#cdb894}

/* ---- compact text card: products without an approved photograph ---- */
.mc-compact{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:440px;margin:0 auto}
.mc-grid + .mc-compact,.mc-compact + .mc-grid{margin-top:22px}
.mc-compact > *{flex:0 1 100%}
@media (min-width:700px){.mc-compact{max-width:820px}.mc-compact > *{flex-basis:calc((100% - 12px) / 2)}}
.mc-c{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:4px 14px;
  padding:14px 16px;border-radius:12px;background:linear-gradient(180deg,#2c1a0e,#21130a);
  box-shadow:0 0 0 1px rgba(233,190,110,.22),0 8px 18px rgba(0,0,0,.4);
  border-left:4px solid var(--bamboo-a,#C9A35E);
}
.mc-c__num{font:500 15px/1.6 var(--sans,"Oswald",sans-serif);letter-spacing:.12em;color:#f6d58c}
.mc-c .mc-name{font-size:21px}
.mc-c .mc-desc{font-size:15px;margin-top:4px}
.mc-c__side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.mc-c .mc-price{font-size:24px}
.mc-c.is-soldout .mc-name,.mc-c.is-soldout .mc-desc{opacity:.7}

/* ---- beverage list (soft drinks, beer, wine) ---- */
.mc-list{max-width:760px;margin:0 auto;padding:6px 18px;border-radius:14px;background:linear-gradient(180deg,#2c1a0e,#21130a);
  box-shadow:0 0 0 1px rgba(233,190,110,.22),0 10px 22px rgba(0,0,0,.4)}
.mc-r{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(233,190,110,.14)}
.mc-r:last-child{border-bottom:0}
.mc-r__img{flex:0 0 52px;width:52px;height:65px;border-radius:8px;overflow:hidden;background:#140a04}
.mc-r__img img{width:100%;height:100%;object-fit:contain}
.mc-r__num{flex:0 0 auto;font:500 14px/1 var(--sans,"Oswald",sans-serif);letter-spacing:.12em;color:#f6d58c;min-width:30px}
.mc-r__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mc-r__name{font:500 19px/1.15 var(--sans,"Oswald",sans-serif);letter-spacing:.05em;text-transform:uppercase;color:#fff3dc}
.mc-r__sub{font:italic 400 14.5px/1.35 Georgia,serif;color:#cdb894}
.mc-r__style{display:inline-block;margin-right:8px;padding:3px 6px 2px;border-radius:4px;vertical-align:2px;
  font:500 11px/1 var(--sans,"Oswald",sans-serif);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#21130a;background:#e9dca0}
.mc-r__style--Red{background:#b0423a;color:#fff3dc}
.mc-r .mc-price{font-size:21px}
.mc-r__wp{display:flex;gap:16px;text-align:right}
.mc-r__wp span{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font:500 20px/1 var(--sans,"Oswald",sans-serif);color:var(--sunset,#F4A23C);white-space:nowrap}
.mc-r__wp small{font:400 11px/1 var(--sans,"Oswald",sans-serif);letter-spacing:.16em;text-transform:uppercase;color:#a99476}
.mc-r.is-soldout .mc-r__name,.mc-r.is-soldout .mc-price{opacity:.6}
@media (max-width:480px){
  .mc-r--wine{flex-wrap:wrap}
  .mc-r--wine .mc-r__text{flex-basis:calc(100% - 50px)}
  .mc-r--wine .mc-r__wp{width:100%;justify-content:flex-end}
}