:root{ --bg:#eb8924; --ink:#14120F; --maxw:1100px; --radius:22px; }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
      color:var(--ink); background:var(--bg); line-height:1.5;
    }

    /* Header + container (no extra gap) */
    .wrap{ max-width:var(--maxw); margin-inline:auto; padding:8px clamp(12px,3vw,28px) 16px; }
    header{ display:flex; justify-content:center; margin-bottom:0; }
    .image{ width:75%; max-height:22vh; display:block; }

    /* HERO frame (fills remaining viewport) */
    .hero{
      position:relative; margin:0 auto;
      border-radius:var(--radius); isolation:isolate;
      width:min(100%,var(--maxw));
      height:calc(100dvh - 22vh - 32px);             /* dynamic vh for mobile */
      box-shadow:0 5px 15px 10px rgb(252 227 200 / 34%);
      overflow:auto; -webkit-overflow-scrolling:touch;
    }
    .hero__frame{
      position:absolute; inset:0; z-index:1;
      background:#fef8f1; border-radius:calc(var(--radius) + 2px);
      border:6px solid #F49C3C; border-top:0; pointer-events:none;
    }

    /* Flip scene */
    .flip-scene{ position:relative; z-index:2; height:100%; perspective:1400px; }
    .flip-card{ position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .6s cubic-bezier(.2,.7,.2,1);}
    .flip-card.is-flipped{ transform:rotateY(180deg); }
    .flip-face{ position:absolute;  border-radius:calc(var(--radius) - 6px); backface-visibility:hidden; overflow:auto; -webkit-overflow-scrolling:touch; }

    /* FRONT (grid) */
    .flip-front{ display:flex; flex-direction:column; padding:.5rem; }
    .cards-grid{ flex:1 1 auto; }
    .row.g-tight{ --bs-gutter-x:.5rem; --bs-gutter-y:.5rem; }

    .menu-card{ height:100%; }
    .card-img-top{ width:100%; display:block; object-fit:cover; height:clamp(120px,24vw,220px); }
    .card-body{ padding:.5rem; display:flex; align-items:center; justify-content:center; min-height:40px; }
    .card-body h6{ font-size:.9rem; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    /* BACK (detail) */
    .flip-back{
      transform:rotateY(180deg);
      background:#774223;                    /* warm brown like reference */
      display:flex; flex-direction:column; padding:.75rem; overflow:auto; -webkit-overflow-scrolling:touch;
    }
    .back-btn{
      align-self:flex-start; display:inline-flex; align-items:center; gap:.5rem;
      background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:999px;
      padding:.4rem .8rem; box-shadow:0 1px 2px rgba(0,0,0,.08); margin-bottom:.5rem;
    }
    .detail-scroll{ position:relative; flex:1 1 auto; overflow:auto; padding-right:.25rem; }
    #fr{ background:url('../ttt.jpg'); background-size:cover; background-position:center; }

    /* ALT MENU rows (bowl + pill + price) */
    .menu-alt{ max-width:980px; margin:4px auto 16px; padding:0 8px; position:relative; }
    .menu-alt::before{
      content:""; position:absolute; inset:0; pointer-events:none;
      background-image:radial-gradient(#000 1px,transparent 1px);
      background-size:18px 18px; opacity:.06;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.24), transparent 45%);
      z-index:0;                              /* keep behind content */
    }
    .menu-alt > *{ position:relative; z-index:1; } /* rows + list above dots */

    .menu-row{ display:flex; align-items:center; gap:0; margin:28px 0; position:relative; }
    .menu-row.reverse{ flex-direction:row-reverse; }

    .bowl{
      width:190px; height:190px; border-radius:50%; overflow:hidden; flex:0 0 auto;
      position:relative; z-index:2; background:#cdb9a5;
      filter:drop-shadow(0 12px 20px rgba(0,0,0,.25));
    }
    .bowl img{ width:100%; height:100%; object-fit:cover; display:block; }

    .plate{
      background:#fff; border-radius:22px;
      box-shadow:0 14px 28px rgba(0,0,0,.18);
      padding:18px 84px 18px 22px; min-height:110px; flex:1 1 auto;
      margin-left:-46px; position:relative;          /* tuck under bowl */
    }
    .menu-row.reverse .plate{
    
      margin-left:0; margin-right:-46px;
    }

    .plate h3{ margin:0 0 6px; font-weight:800; letter-spacing:.4px; color:var(--bg); font-size:24px; text-align:right;   white-space: nowrap;

  text-overflow: ellipsis;}
    .plate p{ margin:0; color:#523c2e; line-height:1.45;   padding:5px 0px 0px 12px;}

    .price{
      position:absolute; top:50%; transform:translateY(-50%);
      right:-16px; width:58px; height:58px; border-radius:999px;
      background:#d2a05f; color:#fff; display:grid; place-items:center; font-weight:800;
      box-shadow:0 10px 22px rgba(0,0,0,.18), 0 0 0 8px #fff;    /* white ring */
    }
    .menu-row.reverse .price{ right:auto; left:-16px; }
       .menu-row.reverse .plate p{ margin:0; color:#523c2e; line-height:1.45;   padding:12px 0px 0px 30px;}
    /* ===== Dotted leader list ===== */
    .leader-list{ margin: 14px 0 6px; }
    .leader-row{ display:flex; align-items:center; gap:12px; padding:6px 2px; }
    .leader-title{ font-weight:800; letter-spacing:.2px; color:#7a3c1a; white-space:nowrap; }
    .leader-dots{
      flex:1 1 auto; height:6px; color:#000;
      background: radial-gradient(currentColor 1.4px, transparent 1.4px) repeat-x;
      background-size:10px 6px; background-position:0 center; opacity:.95;
    }
    .price-pill{
      width:44px; height:44px; border-radius:999px;
      background:#d2a05f; color:#fff; display:grid; place-items:center;
      font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.18);
    }

    /* ===== Responsive tweaks ===== */
    @media (min-width:992px){
      .card-img-top{ height:clamp(180px,18vh,260px); }
      .flip-front{ padding:.75rem; }
    }
    @media (max-width:360px){
      .image{ max-height:20vh; }
      .hero{ height:calc(100dvh - 20vh - 24px); }
      .flip-front{ padding:.35rem; }
      .row.g-tight{ --bs-gutter-x:.35rem; --bs-gutter-y:.35rem; }
      .card-img-top{ height:min(32vw,130px); }
      .card-body{ min-height:36px; padding:.4rem; }
      .card-body h6{ font-size:.85rem; }
    }

    /* Mobile: keep bowl + pill on one line (shrink) */
  /* MOBILE (≤576px): keep items on one line AND flip the reversed row */
/* MOBILE (≤576px): keep items on one line and actually flip .reverse */
@media (max-width: 576px){
  .flip-back .menu-row{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:nowrap;
    flex-direction: row;                 /* normal: image left, card right */
  }
  .flip-back .menu-row.reverse{
    flex-direction: row-reverse !important;  /* image right, card left */
  }

  /* sizes */
  .flip-back .bowl{ width:112px; height:112px; z-index:3; }

  .flip-back .plate{
    flex:1 1 0; min-width:0;
    border-radius:16px; min-height:84px;
    box-shadow:0 10px 22px rgba(0,0,0,.16);
  }

  /* normal row (image left) – overlap from left, badge on right */
  .flip-back .menu-row:not(.reverse) .plate{
    margin-left:-22px; margin-right:0;
    padding:12px 20px 12px 12px;          /* keep room for RIGHT badge */
  }
  .flip-back .menu-row:not(.reverse) .price{
    right:-8px; left:auto;
    width:40px; height:40px; font-size:.85rem;
    top:50%; transform:translateY(-50%);
    box-shadow:0 8px 16px rgba(0,0,0,.16), 0 0 0 6px #fff;
  }

  /* reversed row (image right) – overlap from right, badge on left */
  .flip-back .menu-row.reverse .plate{
    margin-left:0; margin-right:-22px;
    padding:12px 5px 12px 12px;          /* keep room for LEFT badge */
  }
  .flip-back .menu-row.reverse .price{
    left:-8px; right:auto;
    width:40px; height:40px; font-size:.85rem;
    top:50%; transform:translateY(-50%);
    box-shadow:0 8px 16px rgba(0,0,0,.16), 0 0 0 6px #fff;
  }

  /* keep your heading/paragraph alignment as-is (no overrides here) */
}

/* Very narrow (≤360px): tiny shrink so nothing wraps */
@media (max-width:360px){
  .flip-back .bowl{ width:104px; height:104px; }

  .flip-back .menu-row:not(.reverse) .plate{
    margin-left:-18px; padding:10px 48px 10px 10px;
  }
  .flip-back .menu-row.reverse .plate{
    margin-right:-18px; padding:10px 10px 10px 20px;
  }
  .flip-back .menu-row.reverse .plate p{
    margin-right:-18px; padding:10px 10px 10px 25px;
  }
  .flip-back .menu-row:not(.reverse) .price{ right:-6px; width:36px; height:36px; }
  .flip-back .menu-row.reverse .price{ left:-6px; width:36px; height:36px; }
}
#detail-sandvic{ background:url('../san.jpg'); background-size:cover; background-position:center; }
/* Hide the in-app Back button on phones */
@media (max-width: 576px){
  .back-btn{ display:none !important; }
}
/* Hide the in-app Back button on phones */
@media (max-width: 576px){
  .back-btn{ display:none !important; }
}
/* ============== KAMPANYA CARDS (inside the back/detail face) ============== */
/* Scope to rendered content, not the <template> */
.flip-back #detailBody .kampanya-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:16px;
  padding:8px 6px 16px;
}

/* Card */
.deal-card{
  position:relative;
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.16);
  padding:88px 16px 14px;           /* top padding leaves space for the circle image */
  overflow:visible;
}

/* Ribbon (top-right) */
.deal-ribbon{
  position:absolute; top:10px; right:12px;
  background:#F0B529; color:#3a2b00;
  padding:6px 12px;
  border-radius:8px;
  font-weight:800; font-size:.85rem;
  line-height:1;
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.deal-ribbon .tail{
  position:absolute; left:-10px; top:50%;
  width:0; height:0; transform:translateY(-50%);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:10px solid #F0B529; /* little arrow tail */
}

/* Media (circle image that floats over the card) */
.deal-media{
  position:absolute; top:-38px; left:16px;
  width:120px; height:120px;


  display:grid; place-items:center;
}
.deal-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Body */
.deal-body{ margin-top:6px; }
.deal-title{
  margin:0 0 6px;
  font-size:1.15rem; font-weight:800; color:#111;
}
.deal-desc{
  margin:0; color:#5b4e44; font-size:.95rem; line-height:1.35;
}

/* CTA row */
.deal-cta{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between;
}
.deal-price{
  display:inline-block;
  background:#eb8924; color:#fff;
  font-weight:800; font-size:.95rem;
  padding:8px 12px; border-radius:999px;
}
.deal-add{
  display:inline-grid; place-items:center;
  width:40px; height:40px; border-radius:50%;
  border:none; cursor:pointer;
  background:#e63946; color:#fff;
  box-shadow:0 8px 18px rgba(230,57,70,.35);
}
.deal-add:active{ transform:translateY(1px); }

/* Responsive tweak: bigger image on larger screens */
@media (min-width:768px){
  .deal-media{ width:132px; height:132px; top:-44px; }
  .deal-card{ padding-top:96px; }
}
/* More spacing between kampanya cards */
.flip-back #detailBody .kampanya-grid{
  gap: 29px;                 /* was 16px */
  padding: 12px 8px 20px;    /* a touch more breathing room */
}

/* Optional: extra separation per card */
.deal-card{
  margin: 6px;               /* small outer margin around each card */
}

/* On larger screens, space them out even more */
@media (min-width: 992px){
  .flip-back #detailBody .kampanya-grid{ gap: 28px; }
  .deal-card{ margin: 8px; }
}