/* =====================================================================
   K-RAMEN STUDIO · delivery.css
   Floating "Your order" button + pop-up (landing page) and the delivery menu
   page (delivery.html). Rules copied from k-ramenstudio.com (2026-10-05).
   ===================================================================== */

/* ---- Floating "Your order" button (sits under the Q&A pill, follows scroll) ---- */
.delivery-cart-launch { z-index: 119; color: #101719; cursor: pointer; background: #dfff58; border: 1px solid #101719; border-radius: 999px; align-items: center; gap: 9px; min-height: 52px; padding: 9px 15px; font-weight: 950; font-family: inherit; font-size: 1rem; display: flex; position: fixed; bottom: 18px; right: 18px; box-shadow: 0 10px 30px #00000088; }
.delivery-cart-launch b { color: #fff; background: #101719; border-radius: 50%; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; font-size: .78rem; display: grid; }
@media (max-width: 700px) { .delivery-cart-launch { min-height: 48px; padding: 8px 12px; bottom: 12px; right: 12px; } }

/* ---- Pop-up ---- */
.delivery-order-backdrop { z-index: 130; backdrop-filter: blur(5px); background: #000000bd; place-items: end center; padding: 18px; display: grid; position: fixed; inset: 0; }
.delivery-order-panel { color: #141414; background: #f5f1e8; border: 1px solid #6a6047; border-radius: 22px; width: min(650px, 100%); max-height: min(92svh, 900px); padding: clamp(18px, 4vw, 30px); position: relative; overflow: auto; box-shadow: 0 28px 90px #000000aa; }
.delivery-order-panel > header { border-bottom: 1px solid #d0c6b5; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 17px; display: flex; }
.delivery-order-panel > header span { color: #8d281d; letter-spacing: .1em; font-size: .73rem; font-weight: 950; }
.delivery-order-panel > header h2 { margin: 4px 0 0; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; color: #141414; }
.delivery-order-panel > header button { color: #fff; cursor: pointer; background: #111; border: 0; border-radius: 50%; place-items: center; width: 44px; height: 44px; display: grid; flex: 0 0 auto; }
.delivery-cart-empty { text-align: center; justify-items: center; gap: 10px; padding: 34px 12px; display: grid; }
.delivery-cart-empty p { color: #49433a; max-width: 360px; margin: 0; line-height: 1.5; }
.delivery-cart-empty button { color: #fff; cursor: pointer; background: #111; border: 0; border-radius: 999px; min-height: 46px; padding: 9px 16px; font-weight: 900; font-family: inherit; font-size: 1rem; }
@media (max-width: 700px) { .delivery-order-backdrop { padding: 8px; } .delivery-order-panel { border-radius: 18px; max-height: 94svh; } }

/* ---- Delivery menu page ---- */
.delivery-page { background: #101719; min-height: 100vh; }
.delivery-menu-section { color: #fff4dc; background: #101719; padding: clamp(40px, 6vw, 78px) clamp(18px, 5vw, 76px) clamp(50px, 8vw, 100px); scroll-margin-top: 18px; }
.delivery-menu-heading { max-width: 1120px; margin: 0 auto 25px; text-align: center; }
.delivery-menu-heading .eyebrow { color: #dfff58; letter-spacing: .12em; margin: 0 0 18px; font-size: .78rem; font-weight: 950; display: inline-block; border: 2px solid #dfff58; border-radius: 999px; padding: 10px 20px; line-height: 1.5; }
.delivery-menu-heading h1, .delivery-menu-heading h2 { letter-spacing: -.045em; margin: 0; font-size: clamp(1.7rem, 6.4vw, 4.5rem); line-height: 1; white-space: nowrap; max-width: none; text-align: center; }
.delivery-menu-heading > p:last-child { color: #d3d9d7; max-width: 760px; margin: 13px auto 0; font-size: 1rem; line-height: 1.5; }
.delivery-menu-controls { color: #d3d9d7; justify-content: center; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto 14px; font-size: .9rem; font-weight: 800; display: flex; }
.delivery-menu-list { max-width: 1240px; margin: 0 auto; }
.delivery-menu-grid { box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1240px; margin: 0 auto; padding-bottom: 14px; display: grid; }
.delivery-menu-card { background: #091114; border: 1px solid #354144; border-radius: 18px; overflow: hidden; }
.delivery-menu-photos { background: #fff; grid-template-columns: 1fr 1fr; gap: 2px; height: 248px; padding: 9px; display: grid; overflow: hidden; }
.delivery-menu-photos.count-1 { grid-template-columns: 1fr; }
.delivery-menu-photos.count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.delivery-menu-photos img { object-fit: contain; object-position: center; width: 100%; min-width: 0; height: 100%; transform: none; }
.delivery-menu-card-copy { padding: 17px 18px 20px; }
.delivery-menu-card-copy > span { color: #dfff58; letter-spacing: .1em; font-size: .66rem; font-weight: 950; }
.delivery-menu-card-copy h3 { margin: 9px 0 6px; font-size: 1.14rem; line-height: 1.2; }
.delivery-menu-card-copy p { color: #cbd5d2; min-height: 44px; margin: 0; font-size: .86rem; line-height: 1.45; }
.delivery-menu-card-copy strong { color: #fff; letter-spacing: -.03em; margin-top: 13px; font-size: 1.42rem; display: block; }
@media (max-width: 980px) { .delivery-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .delivery-menu-grid { grid-template-columns: 1fr; gap: 10px; padding-bottom: 10px; }
  .delivery-menu-photos { height: 248px; }
  .delivery-menu-card-copy { padding: 14px 16px 17px; }
  .delivery-menu-card-copy p { min-height: 0; }
  .delivery-menu-controls { align-items: flex-start; font-size: .8rem; }
  }

/* ---- Add to order + cart contents + order form (copied from k-ramenstudio.com) ---- */
.delivery-menu-card-copy .delivery-add-button { color: #101719; cursor: pointer; background: #dfff58; border: 0; border-radius: 999px; justify-content: center; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 9px 15px; font-family: inherit; font-size: .9rem; font-weight: 950; display: inline-flex; }
.delivery-menu-card-copy .delivery-add-button:hover, .delivery-menu-card-copy .delivery-add-button:focus-visible { outline-offset: 2px; background: #fff; outline: 3px solid #ffffff4d; }
.delivery-cart-lines { gap: 12px; padding: 17px 0; display: grid; }
.delivery-cart-lines article { border-bottom: 1px solid #d9d0c1; grid-template-columns: 1fr auto; gap: 14px; padding: 13px 0; display: grid; }
.delivery-cart-lines article > div:first-child { gap: 5px; display: grid; }
.delivery-cart-lines article strong { font-size: 1rem; }
.delivery-cart-lines article span { color: #5b554d; font-size: .9rem; line-height: 1.35; }
.delivery-cart-lines article b { font-size: 1rem; }
.delivery-qty-controls { align-self: center; align-items: center; gap: 8px; display: flex; }
.delivery-qty-controls button { color: #111; cursor: pointer; background: #fff; border: 1px solid #9d907c; border-radius: 50%; place-items: center; width: 38px; height: 38px; padding: 0; display: grid; }
.delivery-qty-controls span { text-align: center; min-width: 20px; font-weight: 900; color: #141414; font-size: 1rem; }
.delivery-cart-total { border-top: 2px solid #171717; justify-content: space-between; gap: 14px; padding: 15px 0; font-size: 1.05rem; display: flex; }
.delivery-cart-total strong { font-size: 1.15rem; }
.delivery-order-note { color: #40392f; background: #eee4cf; border-left: 4px solid #d5a32a; margin: 0 0 16px; padding: 12px 14px; font-size: .9rem; line-height: 1.5; }
.delivery-order-form { gap: 12px; display: grid; }
.delivery-order-form > label { gap: 6px; font-size: .9rem; font-weight: 850; display: grid; }
.delivery-order-form input:not([type="checkbox"]), .delivery-order-form textarea, .delivery-order-form select { color: #111; width: 100%; min-height: 46px; font: inherit; background: #fff; border: 1px solid #9e9588; border-radius: 9px; padding: 10px 12px; font-size: 1rem; font-weight: 400; box-sizing: border-box; }
.delivery-order-form textarea { resize: vertical; }
.delivery-order-form input:focus, .delivery-order-form textarea:focus, .delivery-order-form select:focus { border-color: #111; outline: 3px solid #dfff58; }
.delivery-order-form .delivery-order-consent { color: #46413b; align-items: flex-start; gap: 10px; font-size: .86rem; font-weight: 650; line-height: 1.4; display: flex; }
.delivery-order-consent input { accent-color: #111; flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; }
.delivery-submit-button { color: #08160d; cursor: pointer; background: #00a747; border: 0; border-radius: 999px; min-height: 54px; padding: 12px 18px; font-family: inherit; font-size: .98rem; font-weight: 950; }
.delivery-submit-button:hover, .delivery-submit-button:focus-visible { color: #fff; background: #008a3a; }
.delivery-order-status { color: #0b3d1f; background: #dff3e5; border-left: 4px solid #00a747; padding: 12px 14px; font-size: .92rem; font-weight: 700; line-height: 1.45; }
.delivery-order-status p { margin: 0 0 8px; }
.delivery-order-status textarea { font-weight: 400; }
.delivery-order-status[hidden] { display: none; }
@media (max-width: 700px) { .delivery-menu-card-copy .delivery-add-button { min-height: 42px; margin-top: 10px; padding: 8px 12px; font-size: .86rem; } }

@media (max-width: 700px) { .delivery-menu-heading .eyebrow { border-radius: 18px; padding: 9px 14px; } }
@media (max-width: 700px) { body:has(.delivery-cart-launch) .site-qa-toggle { bottom: 72px; } }

/* ---- Combo number + title: centered tag in the white band above the photos ---- */
.delivery-menu-card-tag { background: #fff; text-align: center; padding: 14px 12px 0; }
.delivery-menu-card-tag span { color: #dfff58; background: #101719; letter-spacing: .1em; border-radius: 999px; padding: 7px 15px; font-size: .66rem; font-weight: 950; line-height: 1.3; display: inline-block; }
.delivery-menu-photos { padding-top: 2px; }
.delivery-menu-card-copy h3 { margin-top: 0; }

/* ---- 23-item tabbed delivery menu (copied from k-ramenstudio.com, 2026-10-12) ----
   Placed last so it overrides the older 19-item grid/card rules above. */
.delivery-menu-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:1240px;margin:0 auto 18px}
.delivery-menu-tabs button{color:#e7eeeb;min-height:52px;font:inherit;letter-spacing:.08em;cursor:pointer;background:#172124;border:1px solid #596467;border-radius:14px;justify-content:center;align-items:center;gap:8px;font-size:.88rem;font-weight:950;display:flex}
.delivery-menu-tabs button[aria-selected="true"]{color:#101719;background:#dfff58;border-color:#dfff58;box-shadow:0 8px 22px rgba(223,255,88,.15)}
.delivery-menu-tabs button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.delivery-menu-tabs button span{opacity:.78;font-size:.82em}
.delivery-menu-panel{max-width:1240px;margin:0 auto}
.delivery-menu-panel .delivery-menu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-bottom:0;display:grid}
.delivery-menu-panel .delivery-menu-card{background:#091114;border:1px solid #354144;border-radius:16px;overflow:hidden}
.delivery-photo-composition{isolation:isolate;background:radial-gradient(at 50% 44%,#364043 0,#252e31 48%,#171e21 100%);width:100%;height:176px;position:relative;overflow:hidden}
.delivery-photo-part{object-fit:contain;object-position:center;filter:drop-shadow(0 5px 6px rgba(8,11,12,.533));width:58%;height:calc(100% - 8px);display:block;position:absolute;top:4px;bottom:4px}
.delivery-photo-whole-combo{object-fit:contain;object-position:center;background:#fff;width:100%;height:100%;display:block;position:absolute;inset:0}
.delivery-photo-real-1 .delivery-photo-part-1{width:58%;left:21%}
.delivery-photo-real-2 .delivery-photo-part-1{width:56%;left:0}
.delivery-photo-real-2 .delivery-photo-part-2{width:56%;right:0}
.delivery-photo-real-3 .delivery-photo-part-1{width:57%;left:0}
.delivery-photo-real-3 .delivery-photo-part-2{width:49%;height:58%;top:0;right:0}
.delivery-photo-real-3 .delivery-photo-part-3{width:49%;height:58%;bottom:0;right:0}
.delivery-photo-missing-list{z-index:1;color:#f4f1e9;background:linear-gradient(rgba(23,30,33,.85),rgba(17,23,25,.96));justify-content:center;align-items:center;gap:6px;min-height:40px;padding:4px 8px;display:flex;position:absolute;bottom:0;left:0;right:0}
.delivery-photo-missing-label{text-align:center;background:rgba(48,58,61,.937);border:1px solid #697579;border-radius:7px;flex-direction:column;flex:1 1 0%;justify-content:center;align-items:center;gap:2px;min-width:0;padding:4px 7px;display:flex}
.delivery-photo-missing-label b{overflow-wrap:anywhere;font-size:.68rem;line-height:1.15}
.delivery-photo-missing-label small{color:#d3d8d8;font-size:.6rem;line-height:1.15}
.delivery-photo-real-1.has-missing .delivery-photo-part-1{width:70%;height:calc(100% - 40px);top:0;bottom:auto;left:15%}
.delivery-photo-real-2.has-missing .delivery-photo-part,.delivery-photo-real-3.has-missing .delivery-photo-part-1{height:calc(100% - 40px);top:0;bottom:auto}
.delivery-photo-real-3.has-missing .delivery-photo-part-2{height:calc(50% - 20px);top:0}
.delivery-photo-real-3.has-missing .delivery-photo-part-3{height:calc(50% - 20px);top:auto;bottom:40px}
.delivery-photo-real-0 .delivery-photo-missing-list{background:none;flex-direction:column;gap:7px;inset:0}
.delivery-photo-real-0 .delivery-photo-missing-label{flex:0 0 auto;width:min(76%,230px)}
.delivery-menu-panel .delivery-menu-card-copy{padding:13px 14px 15px}
.delivery-menu-panel .delivery-menu-card-copy>span{color:#dfff58;letter-spacing:.1em;font-size:.63rem;font-weight:950}
.delivery-menu-panel .delivery-menu-card-copy h3{min-height:2.4em;margin:7px 0 5px;font-size:1rem;line-height:1.2}
.delivery-menu-panel .delivery-menu-card-copy p{color:#cbd5d2;min-height:2.6em;margin:0;font-size:.78rem;line-height:1.35}
.delivery-menu-panel .delivery-menu-card-copy>strong{color:#fff;letter-spacing:-.03em;margin-top:9px;font-size:1.22rem;display:block}
.delivery-menu-panel .delivery-menu-card-copy .delivery-add-button svg{flex:0 0 auto}
@media (min-width:1200px){.delivery-menu-panel .delivery-menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){
  .delivery-menu-panel .delivery-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .delivery-photo-composition{height:154px}
  .delivery-photo-missing-list{gap:3px;min-height:42px;padding:3px 4px}
  .delivery-photo-missing-label{gap:1px;padding:3px 4px}
  .delivery-photo-missing-label b{font-size:.58rem}
  .delivery-photo-missing-label small{font-size:.52rem}
  .delivery-photo-real-1.has-missing .delivery-photo-part-1,.delivery-photo-real-2.has-missing .delivery-photo-part,.delivery-photo-real-3.has-missing .delivery-photo-part-1{height:calc(100% - 42px)}
  .delivery-photo-real-3.has-missing .delivery-photo-part-2{height:calc(50% - 21px)}
  .delivery-photo-real-3.has-missing .delivery-photo-part-3{height:calc(50% - 21px);bottom:42px}
  .delivery-photo-real-0 .delivery-photo-missing-label{width:min(92%,230px)}
  .delivery-menu-panel .delivery-menu-card{border-radius:13px}
  .delivery-menu-panel .delivery-menu-card-copy{padding:10px 10px 12px}
  .delivery-menu-panel .delivery-menu-card-copy h3{font-size:.88rem}
  .delivery-menu-panel .delivery-menu-card-copy p{font-size:.71rem;min-height:2.6em}
  .delivery-menu-panel .delivery-menu-card-copy>strong{font-size:1.08rem}
  .delivery-menu-tabs{gap:7px}
  .delivery-menu-tabs button{border-radius:12px;min-height:46px;font-size:.73rem}
}
/* Phones: 2 x 2 tabs so the long labels are not clipped (only deviation from the source site) */
@media (max-width:700px){
  .delivery-menu-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .delivery-menu-tabs button{padding:6px 8px;text-align:center;flex-wrap:wrap;gap:4px;line-height:1.2}
  .delivery-menu-panel .delivery-menu-card-copy>span{display:block;line-height:1.3}
}