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

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

  --oon-yellow:#F7BE27;
  --oon-yellow-dk:#E0A812;
  --oon-red:#E3000E;
  --oon-brown:#642F21;
  --oon-pill-fg:#FFF4EC;
  --oon-ink:#212121;
  --oon-muted:#757575;
  --oon-surface:#FFFFFF;
  --oon-border:#EAEAEA;
  --oon-border-2:#D9D9D9;
  --oon-dark:#0E0E0E;

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

  --oon-ease:cubic-bezier(.22,.61,.36,1);
  --oon-sh-1:0 2px 8px rgba(100,47,33,.06), 0 18px 40px -24px rgba(100,47,33,.34);
  --oon-sh-2:0 6px 16px rgba(100,47,33,.10), 0 34px 62px -30px rgba(100,47,33,.5);

  position:relative;
  padding:clamp(50px,6.5vw,92px) 0;
  background:#FFFFFF; color:var(--oon-ink);
  font-family:var(--oon-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-poke-sec,.oo-poke-sec *,.oo-poke-sec *::before,.oo-poke-sec *::after{ box-sizing:border-box; }

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

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

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

/* ================= grid ================= */
.oo-poke-sec .oo-prods{ display:grid; grid-template-columns:repeat(var(--oon-cols),1fr); gap:22px; }
@media (max-width:1040px){ .oo-poke-sec .oo-prods{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .oo-poke-sec .oo-prods{ grid-template-columns:1fr; } }

.oo-poke-sec .oo-prod{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  background:var(--oon-surface); border:1px solid var(--oon-border);
  border-radius:var(--oon-r); box-shadow:var(--oon-sh-1);
  transition:transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.oo-poke-sec .oo-prod:hover{
  transform:translateY(-5px); box-shadow:var(--oon-sh-2);
  border-color:color-mix(in srgb,var(--oon-yellow) 45%,var(--oon-border));
}

/* a yellow edge lights up along the top of a hovered card */
.oo-poke-sec .oo-prod::after{
  content:""; position:absolute; inset:0 0 auto 0; z-index:3; height:3px;
  background:var(--oon-yellow);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--oon-ease);
}
.oo-poke-sec .oo-prod:hover::after{ transform:scaleX(1); }

.oo-poke-sec .oo-prod__art{
  position:relative; display:block; aspect-ratio:4/3;
  background:var(--oon-dark); overflow:hidden; box-shadow:none;
}
.oo-poke-sec .oo-prod__art img{
  width:100%; height:100%; max-width:none; display:block;
  object-fit:cover; border:0; border-radius:0;
  transition:transform .5s ease;
}
.oo-poke-sec .oo-prod:hover .oo-prod__art img{ transform:scale(1.05); }

.oo-poke-sec .oo-prod__code{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--oon-f-head); font-weight:600; font-size:.66rem;
  letter-spacing:.11em; text-transform:uppercase; color:#FFF;
  background:rgba(10,9,8,.72); padding:4px 9px; border-radius:3px;
}
.oo-poke-sec .oo-prod__tags{
  position:absolute; left:10px; bottom:10px; z-index:2;
  display:flex; gap:5px; flex-wrap:wrap;
}
.oo-poke-sec .oo-tag{
  font-family:var(--oon-f-head); font-weight:600; font-size:.62rem;
  letter-spacing:.11em; text-transform:uppercase;
  padding:3px 8px; border-radius:3px;
}
.oo-poke-sec .oo-tag--new{ background:var(--oon-red); color:#FFF; }
.oo-poke-sec .oo-tag--veg{ background:#5C8A2E; color:#F3F8E9; }

.oo-poke-sec .oo-prod__body{
  padding:16px 18px 20px; flex:1;
  display:flex; flex-direction:column; gap:7px;
}
.oo-poke-sec .oo-prod__name{
  margin:0;
  font-family:var(--oon-f-head); font-weight:600; font-size:1.02rem;
  line-height:1.3; text-transform:uppercase; color:var(--oon-brown);
}
.oo-poke-sec .oo-prod__name a{ color:inherit; text-decoration:none; }
.oo-poke-sec .oo-prod__name a:hover{ color:var(--oon-red); }
.oo-poke-sec .oo-prod__ing{
  margin:0; font-size:.88rem; line-height:1.55; color:var(--oon-muted);
}

.oo-poke-sec .oo-prod__foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-top:auto; padding-top:14px;
}
.oo-poke-sec .oo-pill{
  display:inline-block; white-space:nowrap;
  background:var(--oon-brown); color:var(--oon-pill-fg);
  font-family:var(--oon-f-head); font-weight:600; font-size:1rem;
  letter-spacing:.02em; padding:7px 14px; border-radius:var(--oon-r-sm);
  font-variant-numeric:tabular-nums;
}
/* Woo wraps a formatted price in its own spans; they inherit here */
.oo-poke-sec .oo-pill .amount,
.oo-poke-sec .oo-pill bdi,
.oo-poke-sec .oo-pill del,
.oo-poke-sec .oo-pill ins,
.oo-poke-sec .oo-pill .woocommerce-Price-currencySymbol{ color:inherit; font:inherit; text-decoration:inherit; }
.oo-poke-sec .oo-pill del{ opacity:.6; margin-right:4px; }

.oo-poke-sec .oo-prod__add{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; border-radius:var(--oon-r-sm); border:2px solid transparent;
  background:var(--oon-yellow); color:#211A05; text-decoration:none;
  font-family:var(--oon-f-head); font-weight:600; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  box-shadow:0 6px 18px -9px rgba(247,190,39,.85);
  transition:background-color .2s ease, color .2s ease, transform .12s ease;
}
.oo-poke-sec .oo-prod__add:hover{ background:var(--oon-yellow-dk); color:#211A05; transform:translateY(-1px); }
.oo-poke-sec .oo-prod__add:active{ transform:translateY(1px); }
/* Woo's own states on its add-to-cart button */
.oo-poke-sec .oo-prod__add.added::after{ content:" ✓"; }
.oo-poke-sec .oo-prod__add.loading{ opacity:.6; pointer-events:none; }
.oo-poke-sec .oo-prod .added_to_cart{ display:none; }

@media (max-width:560px){
  /* single-column cards: give the price and the action equal weight. Grid
     tracks split exactly, unlike flex-basis with the button borders. */
  .oo-poke-sec .oo-prod__foot{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
  .oo-poke-sec .oo-prod__foot > *{ min-width:0; }
  .oo-poke-sec .oo-pill{ display:flex; align-items:center; justify-content:center; }
  .oo-poke-sec .oo-prod__add{ padding-inline:10px; }
}

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

/* ================= reveal ================= */
.oo-js .oo-poke-sec .oo-reveal{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.oo-js .oo-poke-sec .oo-reveal.oo-is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .oo-js .oo-poke-sec .oo-reveal{ opacity:1; transform:none; transition:none; }
  .oo-poke-sec .oo-prod,.oo-poke-sec .oo-prod img,.oo-poke-sec .oo-prod::after{ transition:none; }
}

/* ================= theme hardening =================
   A WordPress theme styles bare elements — h2, h3, p, a, img. Those rules
   beat inheritance however low their specificity. */
.oo-poke-sec__eyebrow,
.oo-poke-sec__title,
.oo-poke-sec__lede,
.oo-prod__name,
.oo-poke-sec .oo-prod__ing{ margin-block-end:0; }

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

/* ================= size picker =================
   A poke bowl is sold in three sizes, so the card carries the choice rather
   than sending anyone to the product page for it. */
.oo-poke-sec .oo-sizes{ display:flex; gap:6px; margin-bottom:14px; }
.oo-poke-sec .oo-size{
  flex:1; padding:8px 4px; text-align:center; cursor:pointer;
  border:1px solid var(--oon-border-2); border-radius:var(--oon-r-sm);
  background:#F7F7F7; color:var(--oon-muted);
  font-family:var(--oon-f-head); font-weight:600; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.oo-poke-sec .oo-size:hover{ border-color:var(--oon-brown); }
.oo-poke-sec .oo-size.oo-is-on{
  background:var(--oon-brown); border-color:var(--oon-brown); color:var(--oon-pill-fg);
}
/* the price the picker is pointing at; the others stay in the markup so the
   whole range is in the page for search engines */
.oo-poke-sec .oo-prod__foot .oo-pill[hidden]{ display:none; }

/* ================= add-to-cart plugin hardening =================
   A WhatsApp-ordering plugin prints `.add_to_cart_button,.ajax_add_to_cart
   { display:none !important }` inline, to push shoppers to its own button.
   Our cards need those exact classes for Woo's AJAX and the cart drawer, so
   the button is put back inside this section only — !important is the only
   thing that answers !important. */
.oo-poke-sec .oo-prod__add{ display:inline-flex !important; }

/* ================= ordering on WhatsApp =================
   The restaurant takes its orders in chat, not through a checkout, so the
   card's button wears WhatsApp's own green and opens a conversation with the
   dish already written out. The colour is theirs (#25D366) on purpose: people
   recognise it, and it tells them where the button goes before they press it. */
.oo-poke-sec .oo-prod__add--wa{
  gap:8px; background:#25D366; color:#FFFFFF;
  box-shadow:0 6px 18px -9px rgba(37,211,102,.85);
}
.oo-poke-sec .oo-prod__add--wa:hover{ background:#1EBE5A; color:#FFFFFF; }
.oo-poke-sec .oo-prod__add--out{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 20px; border-radius:var(--oon-r-sm);
  background:#F7F7F7; color:var(--oon-muted);
  font-family:var(--oon-f-head); font-weight:600; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.oo-poke-sec .oo-wa{ flex:none; }