/*!
 * Oyolloo Elements — J10 Party Box widget.
 *
 * Every rule is scoped to .oo-boxes-sec. There is no element selector and no
 * :root block, so nothing here can reach the theme or any other widget.
 */

.oo-boxes-sec{
  --oox-maxw:1220px;
  --oox-pad:clamp(18px,4.5vw,44px);
  --oox-r:12px;
  --oox-r-sm:6px;
  --oox-cols:3;

  --oox-yellow:#F7BE27;
  --oox-red:#E3000E;
  --oox-brown:#642F21;
  --oox-ink:#212121;
  --oox-muted:#757575;
  --oox-faint:#A1A1A1;
  --oox-surface:#FFFFFF;
  --oox-alt:#F7F7F7;
  --oox-dark:#0E0E0E;
  --oox-border:#EAEAEA;
  --oox-border-2:#D9D9D9;

  --oox-f-display:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oox-f-head:'Oswald','Oswald Fallback','Arial Narrow',Arial,sans-serif;
  --oox-f-body:'Roboto','Roboto Fallback','Segoe UI',Helvetica,Arial,sans-serif;

  --oox-sh-1:0 2px 8px rgba(100,47,33,.06), 0 18px 40px -24px rgba(100,47,33,.34);

  position:relative;
  padding:clamp(50px,6.5vw,92px) 0;
  background:#FFFFFF; color:var(--oox-ink);
  font-family:var(--oox-f-body); font-size:16px; line-height:1.7; font-weight:400;
}

/* box-sizing is set on the widget's own subtree, never globally */
.oo-boxes-sec,.oo-boxes-sec *,.oo-boxes-sec *::before,.oo-boxes-sec *::after{ box-sizing:border-box; }

.oo-boxes-sec--alt{ background:var(--oox-alt); }
.oo-boxes-sec--cool{ background:#EFF6F8; }
.oo-boxes-sec--alt::before,.oo-boxes-sec--cool::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--oox-border-2),transparent);
}

.oo-boxes-sec__in{ max-width:var(--oox-maxw); margin-inline:auto; padding-inline:var(--oox-pad); }

/* ================= section head ================= */
.oo-boxes-sec__head{ margin-bottom:34px; text-align:center; }
.oo-boxes-sec__eyebrow{
  display:inline-flex; align-items:center; gap:10px; margin:0;
  font-family:var(--oox-f-head); font-weight:600; font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--oox-brown);
}
.oo-boxes-sec__eyebrow::before{ content:""; flex:none; width:22px; height:2px; background:currentColor; opacity:.5; }
.oo-boxes-sec__title{
  position:relative; margin:14px 0 0; padding-bottom:18px;
  font-family:var(--oox-f-display); font-weight:700;
  font-size:clamp(2rem,4.4vw,3.4rem); line-height:1;
  letter-spacing:.012em; text-transform:uppercase; color:var(--oox-red);
}
.oo-boxes-sec__title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:58px; height:3px; border-radius:3px; background:var(--oox-yellow);
}
.oo-boxes-sec__lede{ margin:14px auto 0; max-width:64ch; color:var(--oox-muted); font-size:1rem; }
@media (max-width:620px){ .oo-boxes-sec__eyebrow::before{ display:none; } }

/* ================= the boxes ================= */
.oo-boxes-sec .oo-boxes{ display:grid; grid-template-columns:repeat(var(--oox-cols),1fr); gap:22px; }
@media (max-width:980px){ .oo-boxes-sec .oo-boxes{ grid-template-columns:1fr; } }

.oo-boxes-sec .oo-box{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--oox-surface); border:1px solid var(--oox-border);
  border-radius:var(--oox-r); box-shadow:var(--oox-sh-1);
}
/* every platter photo is framed the same, wide one included, so the row of
   cards lines up */
.oo-boxes-sec .oo-box img{
  display:block; width:100%; aspect-ratio:3 / 2;
  object-fit:cover; background:var(--oox-dark);
}
.oo-boxes-sec .oo-box__body{
  flex:1; display:flex; flex-direction:column; gap:9px; padding:22px 24px 24px;
}
.oo-boxes-sec .oo-box__pcs{
  margin:0; font-family:var(--oox-f-head); font-weight:600; font-size:.72rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--oox-red);
}
.oo-boxes-sec .oo-box__name{
  margin:0; font-family:var(--oox-f-display); font-weight:700;
  font-size:1.55rem; line-height:1.05; text-transform:uppercase; color:var(--oox-brown);
}
.oo-boxes-sec .oo-box__list{ flex:1; margin:0; font-size:.86rem; line-height:1.6; color:var(--oox-muted); }

/* takeaway / dine-in / delivery sit side by side */
.oo-boxes-sec .oo-box__prices{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:auto; padding-top:14px;
}
/* Each formule is a choice, not a label: the one that is pressed is the one
   the order button asks for. It is a real <button>, so the keyboard reaches it
   and a screen reader is told which is chosen. */
.oo-boxes-sec .oo-box__price{
  display:block; width:100%; margin:0;
  padding:11px 6px; text-align:center; cursor:pointer;
  background:var(--oox-alt); border:1px solid var(--oox-border); border-radius:var(--oox-r-sm);
  font-family:inherit; color:inherit;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.oo-boxes-sec .oo-box__price:hover{ border-color:var(--oox-border-2); }
.oo-boxes-sec .oo-box__price[aria-pressed="true"]{
  background:#FFFFFF; border-color:var(--oox-yellow);
  box-shadow:inset 0 0 0 1px var(--oox-yellow);
}
.oo-boxes-sec .oo-box__price[aria-pressed="true"] b{ color:var(--oox-red); }
.oo-boxes-sec .oo-box__price:focus-visible{ outline:3px solid var(--oox-yellow); outline-offset:2px; }

/* Quoted on request: no price to order at, so the note is the way to ask. */
.oo-boxes-sec .oo-box__price--ask{ cursor:default; }
.oo-boxes-sec .oo-box__ask{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  margin-top:2px; text-decoration:none; color:var(--oox-red);
  font-family:var(--oox-f-head); font-weight:600; font-size:1rem; letter-spacing:.02em;
  transition:color .18s ease;
}
.oo-boxes-sec .oo-box__ask:hover{ color:#25D366; }
.oo-boxes-sec .oo-box__ask .oo-wa{ flex:none; display:block; }
.oo-boxes-sec .oo-box__ask:focus-visible{ outline:3px solid var(--oox-yellow); outline-offset:3px; border-radius:3px; }
/* nothing to quote: one cell across the whole row instead of three empty ones */
.oo-boxes-sec .oo-box__price--ask{ grid-column:1 / -1; }

/* A platter is ordered on its own — it is already the whole order — so this
   button opens a chat with just this box written out and stays clear of the
   bulk tray. Same green, radius and weight as the order button on a dish
   card, so the two read as one control in two places. */
.oo-boxes-sec .oo-box__order{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; padding:12px 20px;
  border:2px solid transparent; border-radius:var(--oox-r-sm);
  background:#25D366; color:#FFFFFF; text-decoration:none;
  font-family:var(--oox-f-head); font-weight:600; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 6px 18px -9px rgba(37,211,102,.85);
  transition:background-color .2s ease, color .2s ease, transform .12s ease;
}
.oo-boxes-sec .oo-box__order:hover{ background:#1EBE5A; color:#FFFFFF; transform:translateY(-1px); }
.oo-boxes-sec .oo-box__order:active{ transform:translateY(1px); }
.oo-boxes-sec .oo-box__order .oo-wa{ flex:none; display:block; }
.oo-boxes-sec .oo-box__order:focus-visible{ outline:3px solid var(--oox-yellow); outline-offset:2px; }
.oo-boxes-sec .oo-box__price small{
  display:block; margin-bottom:4px;
  font-family:var(--oox-f-head); font-weight:500; font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--oox-faint);
}
.oo-boxes-sec .oo-box__price b{
  font-family:var(--oox-f-head); font-weight:600; font-size:1.02rem;
  color:var(--oox-brown); font-variant-numeric:tabular-nums;
}

.oo-boxes-sec :focus-visible{ outline:3px solid var(--oox-yellow); outline-offset:2px; border-radius:2px; }

/* ================= reveal ================= */
.oo-js .oo-boxes-sec .oo-reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.oo-js .oo-boxes-sec .oo-reveal.oo-is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .oo-js .oo-boxes-sec .oo-reveal{ opacity:1; transform:none; transition:none; }
}

/* ================= theme hardening =================
   A theme styles bare h2, h3, p and img; those rules beat inheritance however
   low their specificity. */
.oo-boxes-sec__eyebrow,.oo-boxes-sec__title,.oo-boxes-sec__lede{ margin-block-end:0; }
.oo-boxes-sec .oo-box__pcs,.oo-boxes-sec .oo-box__name,.oo-boxes-sec .oo-box__list{ margin-block:0; }

body.elementor-editor-active .oo-boxes-sec .oo-reveal{ opacity:1; transform:none; }