/* ─────────────────────────────────────────────────────────────────────────
   PRODUCT SELECTION — the consolidated page stylesheet.

   Copied from claude/designs/product-selection/"Product Selection - updated.css"
   (Mac's design, Rule 0). It is the design's own file, with ONE deliberate
   change, recorded here so the next person diffing the two is not puzzled:

     #opTierList  ->  .op-tier-list      (26 occurrences)

   Step 2 renders TWICE -- .best-seat-desktop and .best-seat-mobile are both
   in the DOM at every width, hidden from each other by CSS, and there are two
   more copies on a table event. An id cannot be rendered four times, and
   getElementById would silently resolve to the DESKTOP copy even on a phone.
   Measured, not assumed: at 1440 desktop is display:block and mobile is none;
   at 390 the reverse.

   The drop from an id to a class costs one level of specificity. Checked
   before making it: of every other rule in this sheet whose SUBJECT is the
   tier row itself and which sets one of the 13 properties those rules set,
   ZERO would newly outrank it. The rest of the .op-tier matches target
   DESCENDANTS and never competed.

   THIS SHEET LOADS AFTER purchase-o5.css. That resolves 148 of their 172
   real collisions by order alone, which is what a redesign wants. The 24
   where the old sheet is MORE specific would still win, so they are
   neutralised explicitly at the end of this file rather than left to chance.
   ───────────────────────────────────────────────────────────────────────── */

/* ==========================================================================
   Tixbox · Product Selection page — consolidated stylesheet (updated 2026-10-12)
   Load order on the page:
     1. option5.css              (shared design tokens + base, NOT included here)
     2. Old Header Footer.css    (shared site header/footer, NOT included)
     3. select-ticket.css        (shared ticket picker base, NOT included)
     4. THIS FILE                (everything specific to Product Selection)
     5. Old Check out log in.css / Old Log In.css / Old Forgot Password pop up.css (shared auth drawers, NOT included)
   This file = Old Product Selection.css + Old Add-ons Customer.css + ost/ost.css
              + every inline <style> block from Old Product Selection.html, in cascade order.
   Later sections intentionally override earlier ones — keep the order.
   ========================================================================== */


/* ==========================================================================
   SOURCE: Old Product Selection.css
   ========================================================================== */
.oh-circle-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--o5-line);background:var(--o5-surface);display:inline-flex;align-items:center;justify-content:center;color:var(--o5-ink);cursor:pointer;transition:border-color .15s;flex:none}
.oh-circle-btn:hover{border-color:var(--o5-ink)}
.oh-account-actions{display:flex;align-items:center;gap:10px}
.oh-acct-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1px solid var(--o5-line);background:var(--o5-surface);font-family:var(--o5-display);font-weight:700;font-size:14px;color:var(--o5-ink);cursor:pointer;transition:border-color .15s;white-space:nowrap}
.oh-acct-btn:hover{border-color:var(--o5-ink)}
.oh-acct-btn svg{transition:transform .18s}
.oh-acct-btn.is-open svg{transform:rotate(180deg)}
.oh-acct-panel{position:absolute;top:calc(100% + 10px);right:0;width:320px;background:var(--o5-surface);border:1px solid var(--o5-line);border-radius:22px;box-shadow:0 24px 60px -16px rgba(0,0,0,0.22);padding:24px;display:none;z-index:120}
.oh-acct-panel.is-open{display:block}
.oh-acct-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.oh-acct-avatar{width:64px;height:64px;border-radius:50%;background:var(--o5-surface-2);display:inline-flex;align-items:center;justify-content:center;color:var(--o5-ink3);flex:none}
.oh-acct-avatar svg{width:30px;height:30px}
.oh-acct-head b{display:block;font-family:var(--o5-display);font-size:16px;font-weight:800;letter-spacing:-0.01em;color:var(--o5-ink)}
.oh-acct-head span{font-size:13px;color:var(--o5-ink2)}
.oh-acct-divider{height:1px;background:var(--o5-line);margin:18px 0}.oh-acct-list{display:flex;flex-direction:column}.oh-acct-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 2px;border:0;border-radius:10px;background:transparent;color:var(--o5-ink);font-family:var(--o5-display);font-weight:700;font-size:14.5px;cursor:pointer;text-decoration:none;text-align:left;transition:background .15s;box-sizing:border-box}.oh-acct-row:hover{background:var(--o5-surface-2)}.oh-acct-row-ico{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;color:var(--o5-ink2)}.oh-acct-row.is-danger{color:#d62133}.oh-acct-row.is-danger .oh-acct-row-ico{color:#d62133}
.oh-social-init{width:36px;height:36px;border-radius:50%;background:var(--o5-surface-2);display:inline-flex;align-items:center;justify-content:center;font-family:var(--o5-display);font-size:10.5px;font-weight:800;letter-spacing:0.01em;color:var(--o5-ink);transition:background .15s,color .15s}
.oh-social-init:hover{background:var(--o5-accent);color:#fff}
.oh-pay-chip{padding:7px 14px;border:1px solid var(--o5-line);border-radius:999px;font-size:11.5px;font-weight:700;color:var(--o5-ink2);background:var(--o5-surface);font-family:var(--o5-display)}
.oh-contact-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.oh-contact-list a{font-size:14px;color:var(--o5-ink2)}
.oh-contact-list a:hover{color:var(--o5-accent)}
.sid-overlay{position:fixed;inset:0;background:rgba(20,20,20,0.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:310}
.sid-overlay.is-open{opacity:1;pointer-events:auto}
.sid-drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,92vw);background:var(--o5-surface);box-shadow:-30px 0 70px -24px rgba(0,0,0,0.35);transform:translateX(100%);transition:transform .38s cubic-bezier(.22,.61,.36,1);z-index:311;display:flex;flex-direction:column}
.sid-drawer.is-open{transform:translateX(0)}
.sid-scroll{overflow-y:auto;flex:1}
.sid-close{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,0.35);background:rgba(255,255,255,0.16);color:#fff;display:inline-flex;align-items:center;justify-content:center;z-index:5;transition:background .15s;cursor:pointer}
.sid-close:hover{background:rgba(255,255,255,0.3)}
.sid-hero{background:#d62133;color:#fff;padding:56px 36px 30px;position:relative;overflow:hidden}
.sid-hero::before{content:'';position:absolute;width:260px;height:260px;right:-110px;top:-130px;background:radial-gradient(circle,rgba(255,255,255,0.22),transparent 70%);border-radius:50%;pointer-events:none}
.sid-hero>*:not(.sid-close){position:relative;z-index:1}
.sid-eyebrow{font-size:10px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.9);display:block}
.sid-hero h2{font-family:var(--o5-display);font-size:26px;font-weight:800;letter-spacing:-0.02em;line-height:1.1;margin:12px 0 10px;color:#fff}
.sid-hero p{font-size:13.5px;color:rgba(255,255,255,0.88);line-height:1.55;margin:0}
.sid-perks{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.sid-perks li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#fff}
.sid-perks li svg{flex:none;margin-top:2px}
.sid-form{padding:28px 36px 36px;background:var(--o5-surface)}
.sid-intro{font-size:13.5px;color:var(--o5-ink2);line-height:1.5;margin:0 0 14px}
.sid-sso-list{display:flex;gap:8px}
.sid-sso{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0;padding:11px 14px;border:1px solid var(--o5-line);border-radius:999px;background:var(--o5-surface);font-size:13px;font-weight:700;color:var(--o5-ink);cursor:pointer;text-decoration:none;transition:border-color .15s}
.sid-sso.is-compact{flex:0 0 auto;width:46px;padding:0;gap:0;aspect-ratio:1/1}
.sid-sso.is-compact .lbl{display:none}
.sid-sso:hover{border-color:var(--o5-ink)}
.sid-sso .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sid-lg-google{width:16px;height:16px;background:conic-gradient(from -45deg,#ea4335 0deg 90deg,#fbbc04 90deg 180deg,#34a853 180deg 270deg,#4285f4 270deg 360deg);border-radius:50%;mask:radial-gradient(circle,transparent 26%,#000 27%) center/contain no-repeat;-webkit-mask:radial-gradient(circle,transparent 26%,#000 27%) center/contain no-repeat}
.sid-lg-apple svg{width:14px;height:16px}
.sid-or{display:block;font-size:13px;color:var(--o5-ink2);line-height:1.5;margin:20px 0 16px}
.sid-fields{display:flex;flex-direction:column;gap:12px}
.sid-field{display:block;width:100%;padding:14px 20px;border:1px solid var(--o5-line);border-radius:999px;background:var(--o5-surface);font-family:var(--o5-display);font-size:14px;font-weight:600;color:var(--o5-ink);outline:none;transition:border-color .15s;box-sizing:border-box}
.sid-field:focus{border-color:var(--o5-ink)}
.sid-field::placeholder{color:var(--o5-ink3);font-weight:500}
.sid-pwd{position:relative}
.sid-pwd input{padding-right:48px}
.sid-pwd .eye{position:absolute;top:50%;right:16px;transform:translateY(-50%);background:transparent;border:0;padding:0;color:var(--o5-ink2);cursor:pointer}
.sid-forgot{align-self:flex-end;display:inline-block;margin-top:2px;font-size:11.5px;font-weight:700;color:#d62133;text-decoration:none}
.sid-forgot:hover{color:#b91c2c}
.sid-toggle{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:6px;border-radius:999px;background:var(--o5-surface-2);margin-top:18px}
.sid-toggle-btn{padding:13px 18px;border:0;border-radius:999px;background:transparent;font-family:var(--o5-display);font-size:13.5px;font-weight:800;color:var(--o5-ink2);cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.sid-toggle-btn:hover{color:var(--o5-ink)}
.sid-toggle-btn.is-on{background:#d62133;color:#fff;box-shadow:0 6px 14px -8px rgba(214,33,51,0.45)}
.sid-foot{margin:22px 0 0;font-size:13px;color:var(--o5-ink2);text-align:center}
.sid-foot a{color:#d62133;font-weight:800}
@media (max-width:520px){.sid-hero{padding:52px 26px 26px}.sid-form{padding:24px 26px 30px}}
/* ── hover-reveal pills (from Tickets & Packages Automatic) ── */
.st-tier-pills{max-height:0;margin-top:0;padding-top:0;overflow:hidden;transition:max-height .25s ease,margin-top .25s ease,padding-top .25s ease}
.st-tier:hover .st-tier-pills,.st-tier.is-open .st-tier-pills,.st-tier.is-on .st-tier-pills,.st-tier:focus-within .st-tier-pills{max-height:100px;margin-top:14px;padding-top:14px;padding-bottom:18px}
.st-tier-body{padding:10px 24px 14px}
.st-tier-pills,.st-tier.is-open .st-tier-pills,.st-tier:hover .st-tier-pills{border-top-color:transparent!important}
.st-header,.st-section-head{border-bottom:0!important}
/* ── Old Product Selection — page-specific ── */
.op-timer{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--o5-r);background:linear-gradient(95deg,#fff6f0,#ffe9de);margin-bottom:32px;font-family:var(--o5-display)}
.op-timer-ic{width:34px;height:34px;border-radius:50%;background:#d62133;color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.op-timer-body{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:13.5px;color:var(--o5-ink2)}
.op-timer b{color:#d62133;font-weight:800;font-variant-numeric:tabular-nums;font-size:15px}
.op-timer a{color:var(--o5-ink);text-decoration:underline;text-underline-offset:2px;margin-left:auto;font-weight:700;font-size:12.5px;flex:none}
.op-timer a:hover{color:#d62133}
.op-step-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--o5-ink);color:#fff;font-family:var(--o5-display);font-size:12.5px;font-weight:800;margin-right:10px;flex:none;vertical-align:middle}
.op-card{background:var(--o5-surface);border:1px solid var(--o5-line);border-radius:var(--o5-r);padding:28px;box-shadow:0 2px 14px -10px rgba(0,0,0,0.08)}
.op-dt-block+.op-dt-block{margin-top:24px}
.op-dt-sublabel{font-family:var(--o5-display);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--o5-ink2);margin:0 0 12px}
.op-date-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.op-date-strip::-webkit-scrollbar{display:none}
.op-date-pill{flex:none;display:flex;flex-direction:column;align-items:center;gap:2px;width:66px;padding:12px 8px;border:1.5px solid var(--o5-line);border-radius:16px;background:var(--o5-surface);cursor:pointer;transition:border-color .15s,transform .15s,box-shadow .15s;font-family:var(--o5-display)}
.op-date-pill:hover{border-color:var(--o5-ink2);transform:translateY(-2px)}
.op-date-pill .dow{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--o5-ink2)}
.op-date-pill .dom{font-size:19px;font-weight:800;color:var(--o5-ink);line-height:1.15}
.op-date-pill .mon{font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--o5-ink3)}
.op-date-pill.is-on{background:#fff6f5;border-color:#d62133}
.op-date-pill.is-on .dow,.op-date-pill.is-on .dom,.op-date-pill.is-on .mon{color:var(--o5-ink)}
.op-time-strip{display:flex;gap:10px;flex-wrap:wrap}
.op-time-pill{display:inline-flex;align-items:center;gap:7px;padding:12px 20px;border:1.5px solid var(--o5-line);border-radius:999px;background:var(--o5-surface);font-family:var(--o5-display);font-size:14px;font-weight:700;color:var(--o5-ink);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.op-time-pill:hover{border-color:var(--o5-ink2)}
.op-time-pill.is-on{background:#fff6f5;border-color:#d62133;color:var(--o5-ink)}
.op-proceed{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 24px;margin-top:20px;border:0;border-radius:999px;background:#d62133;color:#fff;font-family:var(--o5-display);font-size:15.5px;font-weight:800;cursor:pointer;box-shadow:0 16px 30px -14px rgba(214,33,51,0.5);transition:background .15s,transform .15s}
.op-proceed:hover{background:#b91c2c;transform:translateY(-1px)}
.op-pay-methods{display:flex;gap:12px;margin-bottom:22px}
.op-pay-pill{flex:1;display:flex;align-items:center;gap:10px;padding:15px 20px;border-radius:16px;border:1.5px solid var(--o5-line);background:var(--o5-surface);font-family:var(--o5-display);font-size:14px;font-weight:700;color:var(--o5-ink);cursor:pointer;transition:border-color .15s,background .15s,color .15s,transform .15s}
.op-pay-pill:hover{transform:translateY(-1px)}
.op-pay-pill .radio{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--o5-line3,var(--o5-ink3));flex:none;position:relative;transition:border-color .15s}
.op-pay-pill.is-on{border-color:#d62133;background:#fff6f5}
.op-pay-pill.is-on .radio{border-color:#d62133}
.op-pay-pill.is-on .radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#d62133}
.op-total-due{background:#fff6f5!important;border:1.5px solid #d62133;color:var(--o5-ink)!important;box-shadow:none!important}
.op-terms{display:flex;align-items:flex-start;gap:10px;font-family:var(--o5-display);font-size:13px;color:var(--o5-ink);line-height:1.5;cursor:pointer;user-select:none;margin-bottom:22px}
.op-terms input{margin-top:2px}
.op-terms a{color:#d62133;font-weight:700}
.op-confirm{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:17px 24px;border:0;border-radius:999px;background:var(--o5-ink3);color:#fff;font-family:var(--o5-display);font-size:15.5px;font-weight:800;cursor:not-allowed;transition:background .15s,transform .15s}
.op-confirm.is-disabled{cursor:pointer;opacity:.6}
.op-confirm.is-ready{background:#d62133;cursor:pointer;box-shadow:0 16px 30px -14px rgba(214,33,51,0.5)}
.op-confirm.is-ready:hover{background:#b91c2c;transform:translateY(-1px)}
.op-secure-note{font-size:12.5px;color:var(--o5-ink2);margin:0 0 20px}
.st-section-head h2{display:flex;align-items:center}
.op-section-card{background:var(--o5-surface);border:1px solid var(--o5-line);border-radius:var(--o5-r);box-shadow:0 2px 14px -10px rgba(0,0,0,0.08)}
.op-section-card-head{border-radius:var(--o5-r) var(--o5-r) 0 0;background:var(--o5-surface-2);padding:22px 28px;border-bottom:1px solid var(--o5-line)}
.op-section-card-head h2{margin:0 0 6px;display:flex;align-items:center;font-family:var(--o5-display);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--o5-ink)}
.op-section-card-head p{margin:0;font-family:var(--o5-display);font-size:13px;color:var(--o5-ink2);line-height:1.45}
.op-section-card-body{padding:28px}
/* ── Shopping Cart restructure ── */
.op-cart-info{background:var(--o5-surface-2);border-radius:12px;margin-top:14px}
.op-cart-info-row{display:flex;align-items:baseline;gap:10px;padding:10px 12px}
.op-cart-info-row+.op-cart-info-row{border-top:1px solid var(--o5-silver,#ecebe6)}
.op-cart-info-k{font-family:var(--o5-display);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--o5-ink3);flex:none}
.op-cart-info-v{font-family:var(--o5-display);font-size:13px;font-weight:700;color:var(--o5-ink);margin-right:auto}
.op-cart-info-edit{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--o5-line);background:var(--o5-surface);color:var(--o5-ink2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s,color .15s}
.op-cart-info-edit:hover{border-color:var(--o5-ink);color:var(--o5-ink)}
.op-cart-card{background:var(--o5-surface-2);border:1px solid var(--o5-line);border-radius:20px;overflow:hidden;margin-bottom:12px}
.op-cart-card:last-child{margin-bottom:0}
.op-cart-cyl{padding:18px 20px 16px}
.op-cart-cyl-row1{display:flex;align-items:center;gap:10px}
.op-cart-cyl-name{font-family:var(--o5-display);font-size:16px;font-weight:800;letter-spacing:-.012em;color:var(--o5-ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-cart-cyl-unit{font-weight:600;color:var(--o5-ink2)}
.op-cart-cyl-price{font-family:var(--o5-display);font-size:15px;font-weight:800;color:var(--o5-ink);white-space:nowrap;flex:none}
.op-cart-cyl-price .ccy{font-size:11px;font-weight:700;color:var(--o5-ink2);margin-right:3px}
.op-cart-cyl-del{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:transparent;color:var(--o5-ink3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}
.op-cart-cyl-del:hover{background:var(--o5-surface);color:#d62133}
.op-cart-cyl-date{margin:6px 0 0;font-family:var(--o5-display);font-size:13px;font-weight:500;color:var(--o5-ink2)}
.op-cart-cyl-ext{display:flex;align-items:center;gap:7px;padding:11px 20px;background:var(--o5-surface);border-top:1px solid var(--o5-line);font-family:var(--o5-display);font-size:12.5px;font-weight:700;color:var(--o5-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-cart-cyl-ext svg{flex:none;color:var(--o5-ink3)}
/* ── Promo code: base ── */
.op-promo{margin-top:18px;--pr-red:#d62133;--pr-grn:#1f8a5b;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"lab" "f"}
.op-promo-label{grid-area:lab;display:flex;align-items:center;gap:6px;font-family:var(--o5-display);font-size:13.5px;font-weight:600;color:var(--o5-ink);margin:0 0 10px}.op-promo-i{position:relative}
.op-promo-tgl{display:none}
.op-promo-body,.op-promo-ok{grid-area:f;align-self:start}
.op-promo-body{display:grid;grid-template-rows:1fr;transition:opacity .25s ease,transform .35s ease}.op-promo-in{min-height:0}
.op-promo.is-applied .op-promo-body{opacity:0;transform:scale(.98);pointer-events:none;visibility:hidden;transition:opacity .2s ease,transform .3s ease,visibility 0s .3s}
.op-promo-field{display:flex;flex-direction:column;gap:12px}
.op-promo-box{position:relative;display:flex;align-items:center;gap:8px;height:46px;padding:0 16px 0 18px;border:1px solid #d4d2cb;border-radius:999px;background:var(--o5-surface);transition:border-color .15s,box-shadow .15s}
.op-promo-box:focus-within{border-color:var(--o5-ink)}
.op-promo-ic{display:none;color:var(--o5-ink3);flex:none}
.op-promo-box input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;font-family:var(--o5-display);font-size:13.5px;font-weight:600;color:var(--o5-ink);letter-spacing:.02em}
.op-promo-box input::placeholder{color:var(--o5-ink3);font-weight:500;letter-spacing:0}
.op-promo-pencil{display:flex;color:var(--o5-ink3);pointer-events:none;flex:none}
.op-promo-apply{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:48px;padding:0 18px;border:0;border-radius:999px;background:var(--o5-surface-2);color:var(--o5-ink);font-family:var(--o5-display);font-size:14.5px;font-weight:800;cursor:pointer;transition:background .15s,color .15s,opacity .15s;flex:none}
.op-promo-arr{display:none}
.op-promo.is-busy .op-promo-apply{opacity:.55;cursor:progress}
.op-promo-msg{margin:0;font-size:12px;font-weight:600;color:var(--pr-red);line-height:1.4}.op-promo-msg:empty{display:none}
.op-promo-ok{position:relative;z-index:1;display:flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 7px;border-radius:999px;background:var(--pr-grn);color:#fff;overflow:hidden;visibility:hidden;clip-path:circle(0 at calc(100% - 46px) 50%);transition:clip-path .7s cubic-bezier(.22,1,.36,1),visibility 0s .7s}
.op-promo-ok::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at calc(100% - 46px) 50%,rgba(255,255,255,.35),transparent 60%);opacity:0;pointer-events:none}
.op-promo-ok-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--pr-grn);flex:none;transform:scale(0) rotate(-90deg)}
.op-promo-ok-ic svg{stroke-dasharray:24;stroke-dashoffset:24}
.op-promo-ok-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;opacity:0;transform:translateX(10px)}.op-promo-ok-t b{font-size:13.5px;font-weight:800;letter-spacing:.06em;color:#fff;line-height:1.25}.op-promo-ok-t small{font-size:12px;color:rgba(255,255,255,.85);font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-promo-rm{height:38px;padding:0 16px;border:0;border-radius:999px;background:rgba(255,255,255,.16);font:inherit;font-size:12.5px;font-weight:700;color:#fff;cursor:pointer;flex:none;opacity:0;transition:background .15s}.op-promo-rm:hover{background:rgba(255,255,255,.28)}
.op-promo.is-applied .op-promo-ok{visibility:visible;clip-path:circle(150% at calc(100% - 46px) 50%);transition:clip-path .7s cubic-bezier(.22,1,.36,1),visibility 0s}
.op-promo.is-applied .op-promo-ok::after{animation:prGlow .9s ease-out .15s}
.op-promo.is-applied .op-promo-ok-ic{animation:prPop .55s cubic-bezier(.34,1.56,.64,1) .22s forwards}
.op-promo.is-applied .op-promo-ok-ic svg{animation:prDraw .4s ease-out .5s forwards}
.op-promo.is-applied .op-promo-ok-t{animation:prIn .45s cubic-bezier(.22,1,.36,1) .34s forwards}
.op-promo.is-applied .op-promo-rm{animation:prFade .35s ease .5s forwards}
@keyframes prPop{to{transform:scale(1) rotate(0)}}@keyframes prDraw{to{stroke-dashoffset:0}}@keyframes prIn{to{opacity:1;transform:none}}@keyframes prFade{to{opacity:1}}@keyframes prGlow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.op-promo-ok,.op-promo.is-applied .op-promo-ok{transition:none}.op-promo.is-applied .op-promo-ok-ic,.op-promo.is-applied .op-promo-ok-t,.op-promo.is-applied .op-promo-rm,.op-promo.is-applied .op-promo-ok-ic svg{animation:none;opacity:1;transform:none;stroke-dashoffset:0}}
.op-promo.is-applied .op-promo-tgl{display:none!important}
/* 2 Inline: apply inside the pill */
[data-pv="2"] .op-promo-field{flex-direction:row;align-items:center;gap:0;height:52px;padding:4px;border:1px solid #d4d2cb;border-radius:999px;background:var(--o5-surface);transition:border-color .15s}
[data-pv="2"] .op-promo-field:focus-within{border-color:var(--o5-ink)}
[data-pv="2"] .op-promo-box{flex:1;height:100%;border:0;box-shadow:none!important;background:none;padding:0 10px 0 14px}
[data-pv="2"] .op-promo-pencil{display:none}[data-pv="2"] .op-promo-ic{display:flex}
[data-pv="2"] .op-promo-apply{width:auto;height:42px;padding:0 22px;background:var(--o5-ink);color:#fff;font-size:13.5px}[data-pv="2"] .op-promo-apply:hover{background:#333}
[data-pv="2"].is-err .op-promo-field{border-color:var(--pr-red);box-shadow:0 0 0 1px var(--pr-red)}
.op-promo .op-promo-field+.op-promo-msg{margin-top:8px}
.op-grand-total{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;padding:16px 20px;border:1.5px solid #d62133;border-radius:999px;background:#fff6f5}
.op-grand-total-lbl{display:inline-flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-family:var(--o5-display)}
.op-grand-total-lbl b{font-size:14.5px;font-weight:800;color:var(--o5-ink)}
.op-grand-total-lbl i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--o5-ink)}
.op-grand-total-amt{font-family:var(--o5-display);font-size:18px;font-weight:800;color:#d62133;white-space:nowrap}
.op-grand-total-amt .ccy{font-size:11px;font-weight:700;margin-right:3px}
/* ── Add-ons section ── */
.op-row-list{display:flex;flex-direction:column}
.op-row{border-bottom:1px solid var(--o5-line)}
.op-row:last-child{border-bottom:0}
.op-row-main{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:22px 0}
.op-row-l{min-width:0}
.op-row-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.op-row-title b{font-family:var(--o5-display);font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--o5-ink)}
.op-row-tag{font-family:var(--o5-display);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--o5-ink);color:#fff;line-height:1.2}
.op-row-tag.is-pre{background:var(--o5-accent,#ff6f3c)}
.op-row-tag.is-few{background:#f5a623;color:#1a1a1a}
.op-row-desc{margin:8px 0 0;font-family:var(--o5-display);font-size:14px;color:var(--o5-ink2)}
.op-row-r{display:flex;align-items:center;gap:18px;flex:none}
.op-row-price{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;font-family:var(--o5-display)}
.op-row-price .ccy{font-size:12px;font-weight:700;color:var(--o5-ink2)}
.op-row-price .num{font-size:25px;font-weight:800;letter-spacing:-.02em;color:var(--o5-ink)}
.op-row-r .stv-pill{flex:none}
/* ── Customer / Admin purchase toggle ── */
.op-role-toggle{display:inline-grid;grid-template-columns:1fr 1fr;gap:0;padding:6px;border-radius:999px;background:var(--o5-surface-2);margin-bottom:24px}
.op-role-btn{padding:11px 20px;border:0;border-radius:999px;background:transparent;font-family:var(--o5-display);font-size:12.5px;font-weight:800;color:var(--o5-ink2);cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.op-role-btn:hover{color:var(--o5-ink)}
.op-role-btn.is-on{background:#d62133;color:#fff}
.op-pay-admin{display:none}
#opPayCard.is-admin-role .op-pay-consumer{display:none}
#opPayCard.is-admin-role .op-pay-admin{display:block}
/* ── Admin purchase form ── */
.op-admin-sec+.op-admin-sec{margin-top:28px;padding-top:26px;border-top:1px solid var(--o5-line)}
.op-admin-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.op-admin-pay{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.op-admin-pill{position:relative;height:auto;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 14px 13px;border-radius:16px;border:1px solid #d4d2cb;background:var(--o5-surface);font-family:var(--o5-display);text-align:left;color:var(--o5-ink);cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.op-admin-pill:hover{border-color:var(--o5-ink2)}
.op-admin-pill.is-on{border-color:#d62133;background:#fff6f5;box-shadow:0 0 0 1px #d62133 inset}
.op-ap-ic{width:34px;height:34px;border-radius:50%;background:var(--o5-surface-2);display:inline-flex;align-items:center;justify-content:center;color:var(--o5-ink);margin-bottom:10px;transition:background .15s,color .15s}
.op-admin-pill.is-on .op-ap-ic{background:#d62133;color:#fff}
.op-ap-t{width:100%;font-size:14px;font-weight:700;line-height:1.25}
.op-ap-s{width:100%;font-size:12px;font-weight:500;color:var(--o5-ink2);line-height:1.35}
.op-ap-ck{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;background:#d62133;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.op-admin-pill.is-on .op-ap-ck{opacity:1;transform:none}
.op-admin-sub{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--o5-surface-2)}
.op-admin-sub:empty{display:none}
.op-admin-sub-l{white-space:nowrap;font-family:var(--o5-display);font-size:12px;font-weight:700;color:var(--o5-ink2)}
.op-admin-sub-opts{display:flex;flex-wrap:wrap;gap:8px}
.op-admin-sub-opt{position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:999px;border:1px solid #d4d2cb;background:var(--o5-surface);font-family:var(--o5-display);font-size:13px;font-weight:600;color:var(--o5-ink);cursor:pointer;user-select:none;transition:border-color .15s,background .15s}
.op-admin-sub-opt:hover{border-color:var(--o5-ink2)}
.op-admin-sub-opt input{position:absolute;opacity:0;width:0;height:0}
.op-admin-sub-mark{width:16px;height:16px;flex:none;border-radius:50%;border:1.5px solid var(--o5-ink3);background:var(--o5-surface);display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.op-admin-sub-mark svg{width:10px;height:10px;opacity:0;transition:opacity .15s}
.op-admin-sub-opt input[type="radio"]+.op-admin-sub-mark::after{content:'';width:6px;height:6px;border-radius:50%;background:#d62133;opacity:0;transition:opacity .15s}
.op-admin-sub-opt input:checked+.op-admin-sub-mark{border-color:#d62133;background:#d62133}
.op-admin-sub-opt input[type="radio"]:checked+.op-admin-sub-mark{background:var(--o5-surface)}
.op-admin-sub-opt input[type="radio"]:checked+.op-admin-sub-mark::after{opacity:1}
.op-admin-sub-opt input[type="checkbox"]:checked+.op-admin-sub-mark svg{opacity:1}
.op-admin-sub-opt:has(input:checked){border-color:#d62133;background:#fff6f5}
.op-admin-sub-opt:has(input:focus-visible){outline:2px solid var(--o5-ink);outline-offset:2px}
.op-admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px 16px;margin-bottom:14px}
.op-admin-field,.op-admin-notes-wrap{display:flex;flex-direction:column;gap:6px}
.op-af-l{font-family:var(--o5-display);font-size:12.5px;font-weight:700;color:var(--o5-ink);display:flex;gap:6px;align-items:baseline}
.op-af-l em{font-style:normal;font-weight:500;color:var(--o5-ink2)}
.op-af-in{position:relative;display:block}
.op-admin-field input{width:100%;height:46px;padding:0 44px 0 18px;border:1px solid #d4d2cb;border-radius:999px;background:var(--o5-surface);font-family:var(--o5-display);font-size:14px;font-weight:600;color:var(--o5-ink);outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box}
.op-admin-field input:focus,.op-admin-notes:focus{border-color:var(--o5-ink);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.op-admin-field input::placeholder,.op-admin-notes::placeholder{color:var(--o5-ink3);font-weight:500}
.op-admin-field svg{position:absolute;top:50%;right:16px;transform:translateY(-50%);color:var(--o5-ink3);pointer-events:none}
.op-admin-notes-wrap{margin-bottom:20px}
.op-admin-notes{display:block;width:100%;min-height:104px;padding:13px 44px 13px 18px;border:1px solid #d4d2cb;border-radius:22px;background:var(--o5-surface);font-family:var(--o5-display);font-size:14px;font-weight:500;color:var(--o5-ink);outline:none;resize:vertical;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.op-admin-notes-wrap svg{position:absolute;top:15px;right:16px;color:var(--o5-ink3);pointer-events:none}
.op-confirm-amt{margin-left:10px;padding-left:10px;border-left:1px solid rgba(255,255,255,.4);font-weight:800}
@media (max-width:720px){.op-admin-grid{grid-template-columns:1fr}}

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset!important;box-shadow:0 0 0 1000px transparent inset!important;-webkit-text-fill-color:inherit!important;transition:background-color 99999s ease-out 0s!important}input:autofill{background:transparent!important}input::-webkit-contacts-auto-fill-button,input::-webkit-credentials-auto-fill-button{visibility:hidden;pointer-events:none}


/* ==========================================================================
   SOURCE: Old Add-ons Customer.css
   ========================================================================== */
/* Tixbox · customer add-ons (Product Selection › Add-ons, Order Confirmation) */
.adx-tag{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;background:#f1efe9;color:#55534e;font-size:11.5px;font-weight:700;letter-spacing:0;text-transform:none}
.adx-row.is-on{background:linear-gradient(#fff,#fff)}
.adx-terms{margin-top:8px;padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:#1a1a1a;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.adx-terms:hover{color:#d62133}
.adx-pr{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.adx-sub{font-size:12px;color:#6b6b6b;white-space:nowrap}
.stv-pill.adx-on{background:#1f8a5b!important;border-color:#1f8a5b!important;color:#fff!important}
.stv-pill[disabled]{opacity:.4;cursor:not-allowed}
.adx-b{display:flex;flex-direction:column;gap:14px;margin:0 0 22px;padding:18px;border-radius:22px;background:#f7f5f0}
.adx-bh{font-size:15px;font-weight:800}
.adx-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.adx-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.adx-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.adx-l{font-size:13px;font-weight:700;color:#55534e}.adx-l em{font-style:normal;font-weight:600;color:#9a9893;margin-inline-start:4px}
.adx-in{height:46px;padding:0 18px;border:1px solid #d4d2cb;border-radius:999px;background:#fff;font:inherit;font-size:14.5px;color:#1a1a1a;outline:0}.adx-in:focus{border-color:#1a1a1a}
.adx-ph{display:flex;align-items:center;height:46px;border:1px solid #d4d2cb;border-radius:999px;background:#fff;overflow:hidden}.adx-ph:focus-within{border-color:#1a1a1a}
.adx-cc{display:inline-flex;align-items:center;gap:7px;height:100%;padding:0 12px 0 16px;border-inline-end:1px solid #ececec;font-size:14px;font-weight:700}.adx-cc img{border-radius:3px;display:block}
.adx-ph input{flex:1;min-width:0;height:100%;padding:0 14px;border:0;outline:0;background:none;font:inherit;font-size:14.5px}
.adx-f.is-err .adx-in,.adx-f.is-err .adx-ph,.adx-f.is-err .adx-pk-t{border-color:#d62133;box-shadow:0 0 0 1px #d62133}
.adx-err{font-size:12.5px;font-weight:700;color:#b91c2c}.adx-hint{font-size:12.5px;color:#6b6b6b}
.adx-pk{position:relative}
.adx-pk-t{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:46px;padding:0 16px 0 18px;border:1px solid #d4d2cb;border-radius:999px;background:#fff;font:inherit;font-size:14.5px;font-weight:700;color:#1a1a1a;cursor:pointer;text-align:start}
.adx-pk-t>span{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden;white-space:nowrap}.adx-pk-t img{border-radius:3px}.adx-pk-t .is-ph{color:#9a9893;font-weight:500}
.adx-pk-t svg{color:#6b6b6b;transition:transform .18s}.adx-pk.is-open .adx-pk-t{border-color:#1a1a1a}.adx-pk.is-open .adx-pk-t svg{transform:rotate(180deg)}
.adx-pop{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:40;list-style:none;margin:0;padding:6px;border:1px solid #d4d2cb;border-radius:16px;background:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.25);min-width:220px}
.adx-pop li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:14px;cursor:pointer}.adx-pop li b{flex:1;font-weight:600}.adx-pop li:hover{background:#f7f5f0}.adx-pop li.is-on{background:#1a1a1a;color:#fff}
.adx-note{margin:0;padding:10px 14px;border-radius:14px;background:#fff;font-size:13.5px}
.adx-refund{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:12px 16px;border-radius:16px;background:#f7f5f0;font-size:13px;line-height:1.5;color:#55534e}.adx-refund svg{flex:none;margin-top:2px}
.adx-errsum{margin:0 0 6px;padding:14px 18px;border:1px solid #f3c2c8;border-radius:18px;background:#fdf1f2;color:#b91c2c}.adx-errsum b{font-size:14.5px}.adx-errsum ul{margin:6px 0 0;padding-inline-start:18px;font-size:13.5px;line-height:1.55}
.adx-ddim{position:fixed;inset:0;z-index:2000;background:rgba(20,20,20,.45)}
.adx-drw{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(540px,100%);display:flex;flex-direction:column;background:#fff;border-start-start-radius:22px;border-end-start-radius:22px;box-shadow:-24px 0 60px -30px rgba(0,0,0,.45);animation:adxIn .22s ease-out;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#1a1a1a}
@keyframes adxIn{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.adx-drw-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 28px 16px;border-bottom:1px solid #ececec}.adx-drw-h h3{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em}.adx-drw-h p{margin:6px 0 0;font-size:13.5px;color:#6b6b6b}
.adx-x{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ececec;border-radius:50%;background:#fff;cursor:pointer;flex:none}.adx-x:hover{border-color:#1a1a1a}
.adx-drw-b{flex:1;overflow-y:auto;padding:22px 28px;display:flex;flex-direction:column;gap:16px;font-size:14.5px;line-height:1.6}.adx-drw-b p{margin:0}
.adx-drw-f{display:flex;justify-content:flex-end;gap:10px;padding:16px 28px 22px;border-top:1px solid #ececec}
.adx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border:1px solid #d4d2cb;border-radius:999px;background:#fff;font:inherit;font-size:14px;font-weight:800;color:#1a1a1a;cursor:pointer;white-space:nowrap}.adx-btn:hover{border-color:#1a1a1a}
.adx-btn.is-red{background:#d62133;border-color:#d62133;color:#fff}.adx-btn.is-red:hover{background:#b91c2c}.adx-btn.is-blk{background:#1a1a1a;border-color:#1a1a1a;color:#fff}.adx-btn:disabled{opacity:.45;cursor:not-allowed}
.adx-btn.is-sm{height:36px;padding:0 15px;font-size:13px}
.adx-opt{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid #d4d2cb;border-radius:18px;cursor:pointer;background:#fff;text-align:start;font:inherit;width:100%}.adx-opt:hover{border-color:#1a1a1a}.adx-opt.is-on{border-color:#1a1a1a;box-shadow:0 0 0 1px #1a1a1a}
.adx-opt i{flex:none;width:20px;height:20px;margin-top:1px;border:1.5px solid #d4d2cb;border-radius:50%}.adx-opt.is-on i{border:6px solid #1a1a1a}
.adx-opt b{display:block;font-size:14.5px}.adx-opt small{display:block;font-size:13px;color:#6b6b6b}
.adx-shows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.adx-show{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;border:1px solid #d4d2cb;border-radius:16px;background:#fff;font:inherit;cursor:pointer;text-align:start}.adx-show b{font-size:13.5px}.adx-show span{font-size:12.5px;font-weight:700;color:#6b6b6b}.adx-show:hover:not(:disabled){border-color:#1a1a1a}.adx-show.is-on{border-color:#1a1a1a;box-shadow:0 0 0 1px #1a1a1a}.adx-show:disabled{background:#f7f5f0;border-color:transparent;cursor:default}
.adx-box{padding:12px 14px;border-radius:14px;background:#f7f5f0;font-size:13.5px}
/* order confirmation */
.pc.is-addon .pc-thumb{display:grid;place-items:center;background:#f1efe9;color:#1a1a1a}
.pc-thumb svg{width:20px;height:20px}
.pc-ad{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:0 16px 14px;padding-inline-start:84px;font-size:13px;color:#55534e}
.pc-ad .adx-btn{height:34px}
.pc-st{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid;font-size:11.5px;font-weight:800;white-space:nowrap}.pc-st.is-a{color:#9a5b00;border-color:#ecc58b;background:#fff8ee}.pc-st.is-g{color:#1f8a5b;border-color:#b9dfcb;background:#eef8f2}.pc-st.is-n{color:#55534e;border-color:#d4d2cb;background:#f4f3ef}
.pc-tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-inline-start:6px;border-radius:999px;background:#f1efe9;color:#55534e;font-size:10.5px;font-weight:800;vertical-align:2px}
.oc-refund{display:flex;gap:8px;margin:14px 0 0;padding:12px 14px;border-radius:14px;background:#f7f5f0;font-size:12.5px;line-height:1.5;color:#55534e}.oc-refund svg{flex:none;margin-top:2px}
@media (max-width:700px){.adx-g2,.adx-g3,.adx-shows{grid-template-columns:minmax(0,1fr)}.pc-ad{padding-inline-start:16px}}

.adx-list{display:flex;flex-direction:column;gap:12px;padding:6px 0}
.adx-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:20px 22px;border:1px solid #ececec;border-radius:22px;background:#fff;transition:border-color .15s,box-shadow .15s}
.adx-card:hover{border-color:#d4d2cb}.adx-card.is-on{border-color:#1a1a1a;box-shadow:0 0 0 1px #1a1a1a}.adx-card.is-na{background:#faf9f6}
.adx-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#f4f2ec;color:#1a1a1a;transition:background .15s,color .15s}.adx-card.is-on .adx-ic{background:#1a1a1a;color:#fff}
.adx-m{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.adx-t{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.adx-t b{font-size:19px;font-weight:800;letter-spacing:-.015em;color:#1a1a1a}
.adx-m p{margin:0;font-size:14px;line-height:1.45;color:#6b6b6b;text-wrap:pretty}
.adx-dl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#7a4a0c}
.adx-na{font-size:12.5px;font-weight:700;color:#9a9893}
.adx-m .adx-terms{margin-top:2px;font-size:12.5px;color:#55534e}
.adx-r{display:flex;align-items:center;gap:20px}
.adx-pr{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:118px}.adx-pr .op-row-price .num{font-size:22px}.adx-sub{font-size:12px;color:#6b6b6b;white-space:nowrap}
.adx-swl{display:flex;flex-direction:column;align-items:center;gap:6px;width:62px;cursor:pointer}.adx-swl>span{font-size:12px;font-weight:800;color:#55534e}.adx-card.is-on .adx-swl>span{color:#1f8a5b}
.adx-sw{position:relative;width:52px;height:30px;padding:0;border:0;border-radius:999px;background:#e8e6e0;cursor:pointer;transition:background .15s}.adx-sw span{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .18s}.adx-sw.is-on{background:#1f8a5b}.adx-sw.is-on span{transform:translateX(22px)}.adx-sw:disabled{opacity:.45;cursor:not-allowed}
.adx-note2{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;font-size:13px;line-height:1.5;color:#55534e}.adx-note2 svg{flex:none;margin-top:2px}
@media (max-width:700px){.adx-card{grid-template-columns:auto minmax(0,1fr);gap:12px;padding:16px}.adx-r{grid-column:1/-1;justify-content:space-between;padding-top:12px;border-top:1px dashed #ececec}.adx-pr{align-items:flex-start}.adx-ic{width:44px;height:44px}.adx-swl{flex-direction:row;width:auto}}

.pc-list.ocx{display:flex;flex-direction:column;gap:18px}
.ocx-g{display:flex;flex-direction:column;border:1px solid #ececec;border-radius:20px;background:#fff;overflow:hidden}
.ocx-gh{padding:12px 20px;background:#f7f5f0;border-bottom:1px solid #ececec;font:700 11px 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#6b6b6b}
.ocx-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 20px;border-top:1px solid #f0efea;transition:background .15s;cursor:default}
.ocx-gh+.ocx-row{border-top:0}
.ocx-row:hover{background:#faf8f3}.ocx-row:hover .ocx-ic{background:#1a1a1a;color:#fff}.ocx-row:hover .ocx-th{transform:scale(1.04)}
.ocx-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#f4f2ec;color:#1a1a1a;transition:background .15s,color .15s}
.ocx-th{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#fde4e1,#fbd2cd);transition:transform .15s}
.ocx-m{display:flex;flex-direction:column;gap:3px;min-width:0}
.ocx-t{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.ocx-t b{font-size:15.5px;font-weight:800;letter-spacing:-.01em}.ocx-t .pc-st{height:22px;font-size:11px}
.ocx-s{font-size:13px;color:#6b6b6b}
.ocx-l{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:#3d3d3a;text-wrap:pretty}
.ocx-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ocx-p{font-size:15.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){.ocx-row{grid-template-columns:auto minmax(0,1fr);padding:14px 16px}.ocx-r{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}}

.adx-list{gap:10px}
.adx-card{display:block;padding:0;border-radius:18px;overflow:hidden}
.adx-card:hover{border-color:#d4d2cb;background:#faf8f3}.adx-card.is-on:hover{border-color:#1a1a1a}
.adx-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;gap:14px;align-items:center;padding:12px 14px 12px 16px}
.adx-ic{width:40px;height:40px;border-radius:12px}
.adx-card:hover .adx-ic{background:#ebe8e0}.adx-card.is-on .adx-ic,.adx-card.is-on:hover .adx-ic{background:#1a1a1a;color:#fff}
.adx-m{display:flex;flex-direction:column;gap:2px;min-width:0;padding:0;border:0;background:none;font:inherit;text-align:start;cursor:pointer;color:inherit}
.adx-t b{font-size:16px}.adx-tag{height:20px;padding:0 8px;font-size:11px}
.adx-one{font-size:13px;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.adx-one em{font-style:normal;font-weight:700;color:#9a9893}
.adx-pr{min-width:0}.adx-pr .op-row-price .num{font-size:18px}.adx-sub{font-size:11.5px}
.adx-cv{display:grid;place-items:center;width:34px;height:34px;border:1px solid #ececec;border-radius:50%;background:#fff;color:#55534e;cursor:pointer;transition:transform .18s,border-color .15s}.adx-cv:hover{border-color:#1a1a1a}.adx-card.is-open .adx-cv{transform:rotate(180deg)}
.adx-d{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:2px 20px 16px 70px}.adx-d p{margin:0;font-size:13.5px;line-height:1.5;color:#3d3d3a}.adx-d ul{margin:0;padding-inline-start:18px;font-size:13px;line-height:1.6;color:#55534e}
/* The design's discs come from the browser default; the site's base sheets switch list markers off, so they are restated here. */
.adx-d ul{list-style:disc}
.adx-d .adx-terms{margin-top:2px}
.op-tier-list .op-row{margin:0 -14px;padding:0 14px;border-radius:16px;transition:background .15s}.op-tier-list .op-row:hover{background:#faf8f3}
@media (max-width:700px){.adx-h{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}.adx-pr{grid-column:2;grid-row:2;align-items:flex-start}.adx-sw{grid-column:3;grid-row:1}.adx-cv{grid-column:3;grid-row:2}.adx-d{padding:2px 16px 14px}}

.adx-tag{white-space:nowrap;flex:none}.adx-t{flex-wrap:nowrap;min-width:0}.adx-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adx-m{overflow:hidden}.adx-one{display:block;max-width:100%}
.adx-pr{flex:none;min-width:150px}
.adx-card.is-open .adx-one{visibility:hidden}

.adx-m{overflow:visible}.adx-m:focus-visible{outline:2px solid #1a1a1a;outline-offset:4px;border-radius:8px}
.adx-t{display:flex;align-items:center;gap:8px}
.adx-i{position:relative;display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;color:#6b6b6b;cursor:help;outline:none}
.adx-i:hover,.adx-i:focus-visible,.adx-i.is-o{color:#1a1a1a;background:#efede7}
.adx-tip{position:absolute;z-index:40;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);width:260px;padding:10px 13px;border-radius:12px;background:#1a1a1a;color:#fff;font-size:12.5px;font-weight:500;line-height:1.45;text-align:start;white-space:normal;box-shadow:0 12px 28px -12px rgba(0,0,0,.45);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,transform .15s,visibility .15s}
.adx-tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border:6px solid transparent;border-top-color:#1a1a1a}
.adx-i:hover .adx-tip,.adx-i:focus-visible .adx-tip,.adx-i.is-o .adx-tip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.adx-calc{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 12px;border-radius:999px;background:#f2f0ea;font-size:12.5px;color:#55534e;white-space:nowrap}.adx-calc b{color:#1a1a1a;font-weight:800}
.adx-card.is-open .adx-one{visibility:visible}
.adx-tag.is-na{background:#fdecee;color:#b91c2c;border:1px solid #f3c2c8}

/* expandable ticket rows */
.op-tier{transition:border-color .18s,background .18s}
.op-tier .op-row-l{cursor:pointer;outline:none}.op-tier .op-row-l:focus-visible{outline:2px solid #1a1a1a;outline-offset:4px;border-radius:8px}
.op-tier .op-row-r{gap:14px}
.op-tier .op-tcv{flex:none}.op-tier.is-open .op-tcv{transform:rotate(180deg)}
.op-tier-d{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:0 0 18px;animation:opTierIn .2s ease-out}
.op-tier-d p{margin:0;font-size:14px;line-height:1.5;color:#55534e;max-width:620px}
.op-tier-k{margin-top:4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b}
.op-tier-d ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.op-tier-d li{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:#f7f5f0;font-size:13px;font-weight:600;color:#1a1a1a}.op-tier-d li svg{color:#1f8a5b}
.op-tier-none{font-size:13px;color:#9a9893}
@keyframes opTierIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ticket cards v2 */
.op-tier-list{display:flex;flex-direction:column;gap:10px}
.op-tier-list .op-row.op-tier{margin:0;padding:0;border:1px solid #ececec;border-radius:18px;background:#fff;transition:border-color .18s,background .18s,box-shadow .18s}
.op-tier-list .op-row.op-tier+.op-row.op-tier{border-top:1px solid #ececec}
.op-tier-list .op-row.op-tier:hover{background:#faf8f3;border-color:#d4d2cb}
.op-tier-list .op-row.op-tier.is-on{border-color:#1a1a1a;box-shadow:0 0 0 1px #1a1a1a}
.op-tier-list .op-row.op-tier.is-on:hover{background:#fff}
.op-tier .op-row-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 14px 12px 16px;border:0}
.op-tier-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#f4f2ec;color:#1a1a1a;transition:background .15s,color .15s}
.op-tier:hover .op-tier-ic{background:#ebe8e0}.op-tier.is-on .op-tier-ic{background:#1a1a1a;color:#fff}
.op-tier .op-row-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.op-tier .op-row-title b{font-size:16px;font-weight:800;letter-spacing:-.01em}
.op-tier-sub{font-size:12.5px;color:#6b6b6b}
.op-tier .op-row-r{display:flex;align-items:center;gap:14px}
.op-tier .op-row-price .num{font-size:18px}.op-tier .op-row-price .ccy{font-size:12px}
.op-tier .stv-pill{height:40px}
.op-tier [class*="stepper"],.op-tier .stv-step{height:40px}
.op-tier .op-tcv{width:34px;height:34px}
.op-tier-d{padding:2px 20px 16px 70px}
@media (max-width:640px){.op-tier .op-row-main{grid-template-columns:auto minmax(0,1fr);row-gap:10px}.op-tier .op-row-r{grid-column:1/-1;justify-content:space-between}.op-tier-d{padding:0 16px 16px}}
.op-tier-list .op-row.op-tier{height:auto;min-height:0;overflow:visible;display:block}
.op-tier-d{width:100%;box-sizing:border-box}.op-tier-k{white-space:nowrap;line-height:1.4}.op-tier-d li{white-space:nowrap}
#opLimit [class*="count"],#opLimit b:last-child,#opLimit span:last-child{white-space:nowrap}
.op-tier-d ul{width:100%;align-content:flex-start}.op-tier-d{align-items:stretch}.op-tier-d p,.op-tier-k{align-self:flex-start}

/* ticket details v3 */
.op-tier-d{display:block;padding:0 14px 14px 16px;animation:opTierIn .22s ease-out}
.op-tier-p{display:flex;flex-direction:column;gap:12px;padding:16px 18px;border-radius:14px;background:#f7f5f0;margin-inline-start:54px}
.op-tier-p p{margin:0;font-size:14px;line-height:1.55;color:#3d3d3a;max-width:none}
.op-tier-k{display:flex;align-items:center;gap:10px;margin:0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b}.op-tier-k i{flex:1;height:1px;background:#e4e1d9}
.op-tier-d ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 18px;width:100%}
.op-tier-d li{display:flex;align-items:center;gap:10px;height:auto;padding:0;border-radius:0;background:none;font-size:13.5px;font-weight:600;color:#1a1a1a;white-space:normal}
.op-tier-ck{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#1f8a5b;color:#fff}
.op-tier .op-tcv{background:#fff;border-color:#e4e1d9;transition:transform .2s,background .15s,border-color .15s,color .15s}
.op-tier .op-tcv:hover{border-color:#1a1a1a}
.op-tier.is-open .op-tcv{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.op-tier.is-open .op-tier-sub{color:#1a1a1a}
@media (max-width:640px){.op-tier-p{margin-inline-start:0}}
.op-tier-ck svg{display:block!important;color:#fff!important;stroke:#fff;width:11px;height:11px}.op-tier-d li svg{color:#fff}
.op-tier-k i{display:block;min-width:20px}
.op-tier-ck{width:20px;height:20px}
.op-tier-k i{flex:1 1 auto!important;width:auto}
/* cream cylinders */
.op-tier-list .op-row.op-tier,.adx-card{background:#fefdfb}
.op-tier-list .op-row.op-tier:hover,.adx-card:hover{background:#f9f7f2}
.op-tier-list .op-row.op-tier.is-on,.op-tier-list .op-row.op-tier.is-on:hover{background:#fefdfb}
.op-tier-ic,.adx-ic{background:#f2efe8}
.op-tier-p{background:#f4f1ea}
/* added = green */
.op-tier-list .op-row.op-tier.is-on,.op-tier-list .op-row.op-tier.is-on:hover,.adx-card.is-on,.adx-card.is-on:hover{border-color:#1f8a5b;box-shadow:0 0 0 1px #1f8a5b;background:#f1f8f4}
.op-tier.is-on .op-tier-ic,.adx-card.is-on .adx-ic,.adx-card.is-on:hover .adx-ic{background:#1f8a5b;color:#fff}
.op-tier.is-on .op-tier-p,.adx-card.is-on .adx-d{background:#e6f2eb}
/* limit bar: silver */
.op-limit{background:#f4f2ec!important;border:0!important;color:#3d3d3a!important}
.op-limit b,.op-limit strong{color:#1a1a1a!important}
.op-limit-ic{background:#1a1a1a!important;color:#fff!important}
.op-limit>span:last-child,.op-limit [class*="count"]{background:#fff!important;border-color:#e4e1d9!important;color:#1a1a1a!important}
/* added = red (matches date/time pills) */
.op-tier-list .op-row.op-tier.is-on,.op-tier-list .op-row.op-tier.is-on:hover,.adx-card.is-on,.adx-card.is-on:hover{border-color:#d62133;box-shadow:0 0 0 1px #d62133;background:#fff6f5}
.op-tier.is-on .op-tier-ic,.adx-card.is-on .adx-ic,.adx-card.is-on:hover .adx-ic{background:#d62133;color:#fff}
.op-tier.is-on .op-tier-p,.adx-card.is-on .adx-d{background:#fdeceb}
.adx-card.is-on .adx-sw,.adx-sw.is-on{background:#d62133}
.adx-card.is-on .adx-swl>span{color:#d62133}


/* ==========================================================================
   SOURCE: ost/ost.css
   ========================================================================== */
.oep-ctl{position:fixed;bottom:16px;left:16px;z-index:1100;width:360px;background:#fff;border-radius:20px;box-shadow:0 20px 50px -18px rgba(0,0,0,.35);font-family:'Plus Jakarta Sans',sans-serif;color:#1a1a1a;overflow:hidden;text-align:left}.oep-ctl.is-min{width:auto}
.oep-ctl-t{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 16px;border:0;background:none;font:inherit;font-size:13px;font-weight:800;cursor:pointer;color:#1a1a1a}
.oep-ctl-b{display:flex;flex-direction:column;gap:6px;padding:0 14px 14px}.oep-ctl-b label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;margin-top:4px}
.oep-ctl-r{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.oep-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border:1px solid #ececec;border-radius:999px;background:#fff}.oep-seg button{white-space:nowrap;line-height:1;height:28px;padding:0 11px;border:0;border-radius:999px;background:none;font:inherit;font-size:12px;font-weight:700;color:#6b6b6b;cursor:pointer}.oep-seg button.is-on{background:#1a1a1a;color:#fff}.oep-seg button.is-dis{opacity:.35;cursor:not-allowed}
.oep-dev{position:fixed;inset:0;z-index:1150;display:flex;align-items:center;justify-content:center;background:rgba(20,20,20,.7)}.oep-dev-f{background:#111;border-radius:40px;padding:12px;height:min(88vh,900px)}.oep-dev-f.is-phone{width:414px}.oep-dev-f.is-tablet{width:min(858px,94vw);border-radius:28px}.oep-dev-f iframe{width:100%;height:100%;border:0;border-radius:30px;background:#fff}.oep-dev-f.is-tablet iframe{border-radius:18px}
html[dir=rtl] .oep-ctl{left:auto;right:16px}
html[lang=ar] body{font-family:'Almarai','Plus Jakarta Sans',sans-serif}html[lang=fa] body{font-family:'Vazirmatn','Plus Jakarta Sans',sans-serif}
html[dir=rtl] .op-row-price,html[dir=rtl] .oc-stub-row .v,html[dir=rtl] [class*="price"] .num{direction:ltr;unicode-bidi:isolate}
.ost-bn{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:12px 20px;font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;text-align:center}
.ost-bn.is-pv{background:#1a1a1a;color:#fff}.ost-bn-x{height:32px;padding:0 14px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:none;color:#fff;font:inherit;font-size:12.5px;font-weight:800;cursor:pointer}.ost-bn-x:hover{background:#fff;color:#1a1a1a}
.ost-bn.is-soldout,.ost-bn.is-ended{background:#f4f2ec;color:#1a1a1a}.ost-bn.is-soon{background:#1a1a1a;color:#fff}.ost-bn.is-few{background:#fff3dc;color:#8a5300}
.o5[data-theme=dark] .ost-bn.is-soldout,.o5[data-theme=dark] .ost-bn.is-ended{background:#000;color:#fff;border-bottom:1px solid #2a2a2a}
.ost-lock{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:#f4f2ec;color:#6b6b6b;font-size:13px;font-weight:800;white-space:nowrap}
.ost-soldout .op-tier .op-row-price,.ost-ended .op-tier .op-row-price{opacity:.45;text-decoration:line-through}
.ost-soon .op-tier .op-row-price{opacity:.45}
.ost-off{opacity:.45!important;cursor:not-allowed!important}
.ost-c-missing image-slot,.ost-c-missing .oc-event-img,.ost-c-missing .op-hero-img{display:none!important}
.ost-c-missing .ocx-g+.ocx-g{display:none}
.ost-emb .oep-ctl{display:none}
.oep-ctl,.oep-ctl *{direction:ltr!important;text-align:left!important;font-family:'Plus Jakarta Sans',sans-serif!important;letter-spacing:normal}
.oep-ctl-b label{align-self:flex-start;letter-spacing:.08em}
.oep-ctl .oep-seg button[data-ost-v="ar"]{font-family:'Almarai',sans-serif!important}.oep-ctl .oep-seg button[data-ost-v="fa"]{font-family:'Vazirmatn',sans-serif!important}
/* dark fixes for cards added in this project */
.o5[data-theme=dark] .op-tier-list .op-row.op-tier,.o5[data-theme=dark] .adx-card{background:#000;border-color:#2a2a2a}
.o5[data-theme=dark] .op-tier-list .op-row.op-tier:hover,.o5[data-theme=dark] .adx-card:hover{background:#111;border-color:#3a3a3a}
.o5[data-theme=dark] .op-tier-ic,.o5[data-theme=dark] .adx-ic{background:#1f1f1f;color:#fff}
.o5[data-theme=dark] .op-tier-p,.o5[data-theme=dark] .adx-d{background:#141414}
.o5[data-theme=dark] .op-tier-p p,.o5[data-theme=dark] .op-tier-d li,.o5[data-theme=dark] .adx-d p{color:#e8e6e1}
.o5[data-theme=dark] .op-tier-k i{background:#2a2a2a}
.o5[data-theme=dark] .op-tier .op-tcv,.o5[data-theme=dark] .adx-cv{background:#000;border-color:#3a3a3a;color:#fff}
.o5[data-theme=dark] .op-tier-list .op-row.op-tier.is-on,.o5[data-theme=dark] .adx-card.is-on{background:#2a0f13;border-color:#d62133}
.o5[data-theme=dark] .op-tier.is-on .op-tier-p,.o5[data-theme=dark] .adx-card.is-on .adx-d{background:#1d0a0d}
.o5[data-theme=dark] .op-limit{background:#141414!important;color:#e8e6e1!important}.o5[data-theme=dark] .op-limit b{color:#fff!important}.o5[data-theme=dark] .op-limit-ic{background:#fff!important;color:#000!important}
.o5[data-theme=dark] .op-limit>span:last-child{background:#000!important;border-color:#2a2a2a!important;color:#fff!important}
.o5[data-theme=dark] .op-date-pill.is-on,.o5[data-theme=dark] .op-time-pill.is-on,.o5[data-theme=dark] .op-pay-pill.is-on{background:#2a0f13}
.o5[data-theme=dark] .adx-refund,.o5[data-theme=dark] .adx-note2{background:#141414;color:#e8e6e1}
.o5[data-theme=dark] .ost-lock{background:#1f1f1f;color:#9a9893}
.o5[data-theme=dark] .ocx-row,.o5[data-theme=dark] .pc{background:#000;border-color:#2a2a2a}
.op-tier .op-row-title,.op-tier .op-row-title b{height:auto!important;max-height:none!important;line-height:1.3!important;white-space:normal!important;overflow:visible!important;display:block}
.op-tier .op-row-l{padding-block:2px}
.oep-ctl{z-index:100000!important}.oep-dev{z-index:100001!important}
.oep-ctl .oep-seg{height:auto!important;min-height:0!important;max-height:none!important;width:auto!important;flex-wrap:wrap!important;align-items:center}
.oep-ctl .oep-ctl-r{flex-wrap:wrap!important;height:auto!important}
.oep-ctl button{min-width:0!important;width:auto;margin:0!important;box-shadow:none!important;flex:none!important;transform:none!important}
.oep-ctl .oep-ctl-t{width:100%!important}
.ost-bn-x{white-space:nowrap}
/* limited tag */
.op-tier .op-row-title b{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 8px}
.op-tier .op-row-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;text-transform:none;white-space:nowrap;line-height:1}
.op-tier .op-row-tag.is-few{background:#fff3dc;color:#8a5300;border:1px solid #f2d39b}
.o5[data-theme=dark] .op-tier .op-row-tag.is-few{background:#2a1f0a;color:#f2c46b;border-color:#5a4210}
/* panel seg fix */
.oep-ctl .oep-seg{display:inline-flex!important;flex:none!important;flex-wrap:nowrap!important}
.oep-ctl .oep-ctl-b>.oep-seg{flex-wrap:wrap!important;align-self:stretch}
.oep-ctl .oep-seg button{height:28px!important;line-height:1!important;padding:0 11px!important;font-size:12px!important}
/* ticket expansion v4: minimal */
.op-tier.is-open{box-shadow:0 14px 34px -26px rgba(0,0,0,.28)}
.op-tier-d{display:block!important;padding:0 16px 16px 70px!important;animation:opTierIn .22s ease-out}
.op-tier-p{display:flex!important;flex-direction:column;gap:12px!important;margin:0!important;padding:14px 0 0!important;background:none!important;border-top:1px dashed #e4e1d9;border-radius:0!important}
.op-tier-p p{margin:0;font-size:13.5px!important;line-height:1.55;color:#55534e!important}
ul.op-tier-inc{display:flex!important;flex-wrap:wrap;gap:6px!important;margin:0;padding:0;list-style:none;width:auto!important}
ul.op-tier-inc li{display:inline-flex!important;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px!important;border:1px solid #e4e1d9;border-radius:999px;background:#fff!important;font-size:12.5px!important;font-weight:600!important;color:#1a1a1a!important;white-space:nowrap}
ul.op-tier-inc li svg{display:block;color:#1f8a5b!important;stroke:#1f8a5b}
.op-tier.is-on .op-tier-p{background:none!important;border-top-color:#f3c2c8}
.op-tier.is-on ul.op-tier-inc li{border-color:#f3d4d8}
.op-tier.is-open .op-tcv{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.o5[data-theme=dark] .op-tier-p{border-top-color:#2a2a2a}.o5[data-theme=dark] .op-tier-p p{color:#c9c6bf!important}
.o5[data-theme=dark] ul.op-tier-inc li{background:#111!important;border-color:#2a2a2a;color:#fff!important}
.o5[data-theme=dark] .op-tier.is-open .op-tcv{background:#fff;border-color:#fff;color:#000}
@media (max-width:640px){.op-tier-d{padding:0 16px 16px!important}}
.st-summary-edits:empty{display:none!important}.st-summary-edits:empty+*{border-top:0!important;margin-top:0!important;padding-top:0!important}
/* signed-in: read-only prefilled fields */
[data-buyer-card][data-auth-state=member] .co-ctl.is-ro,[data-buyer-card][data-auth-state=member] [data-trigger].is-ro{cursor:default;background:#fbfaf7}
[data-buyer-card][data-auth-state=member] .co-ctl.is-ro input{cursor:default;caret-color:transparent;pointer-events:none}
[data-buyer-card][data-auth-state=member] .co-ctl.is-ro button,[data-buyer-card][data-auth-state=member] [data-trigger].is-ro *{pointer-events:none}
[data-buyer-card][data-auth-state=member] [data-trigger].is-ro svg:not(.co-ok):last-child{opacity:0}
[data-buyer-card][data-auth-state=member] [data-verify].is-verified{cursor:default;pointer-events:none}
.o5[data-theme=dark] [data-buyer-card][data-auth-state=member] .co-ctl.is-ro,.o5[data-theme=dark] [data-buyer-card][data-auth-state=member] [data-trigger].is-ro{background:#0d0d0d}
.ost-co-customer .op-role-toggle,.ost-co-admin .op-role-toggle{display:none!important}
.co-saved-note{display:flex;align-items:center;gap:8px;margin:4px 0 0;padding:10px 14px;border-radius:14px;background:#f4f2ec;font-size:13px;color:#55534e}.co-saved-note svg{flex:none;color:#1a1a1a}
.co-saved-note.is-ok{background:#e9f4ee;color:#155c3d}.co-saved-note.is-ok svg{color:#1f8a5b}
.o5[data-theme=dark] .co-saved-note{background:#141414;color:#c9c6bf}.o5[data-theme=dark] .co-saved-note.is-ok{background:#0f2a1d;color:#8fd6b2}
/* terms as toggle */
/* "~", NOT the design's "+" (live, 2026-10-14). bootstrapValidator validates
   #payment-form and inserts its feedback <i> straight after the checkbox, so
   an adjacent-sibling rule never matched: the box ticked and Confirm turned
   on, while the switch stayed drawn off under every pill. The general sibling
   means the same thing here and survives the inserted element. */
.op-terms{position:relative;align-items:center!important}
.op-terms input.op-terms-in{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer;z-index:1}
.op-terms-sw{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:#e4e1d9;transition:background .18s}
.op-terms-sw i{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.op-terms-in:checked~.op-terms-sw{background:#d62133}.op-terms-in:checked~.op-terms-sw i{transform:translateX(18px)}
.op-terms-in:focus-visible~.op-terms-sw{box-shadow:0 0 0 3px rgba(214,33,51,.25)}
html[dir=rtl] .op-terms-sw i{left:auto;right:3px}html[dir=rtl] .op-terms-in:checked~.op-terms-sw i{transform:translateX(-18px)}
.o5[data-theme=dark] .op-terms-sw{background:#2a2a2a}.o5[data-theme=dark] .op-terms-in:checked~.op-terms-sw{background:#d62133}
/* reserve payment v2 */
.op-pay-methods{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.op-pay-pill.op-pay-rsv{grid-column:1/-1;display:flex;align-items:center;gap:12px;text-align:start;transition:border-radius .2s}
.op-rsv-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.op-rsv-t b{font-weight:800}.op-rsv-t small{font-size:12.5px;font-weight:500;color:#6b6b6b}
.op-rsv-amt{display:none}
.op-pay-methods:has(.op-pay-rsv.is-on){margin-bottom:0}
.op-pay-pill.op-pay-rsv.is-on{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
.op-rsv-box{margin-top:-1px;padding:4px 20px 18px 52px;border:1.5px solid #d62133;border-top:0;border-radius:0 0 18px 18px;background:#fff6f5;display:flex;flex-direction:column;gap:14px;animation:opTierIn .22s ease-out}
.op-rsv-box[hidden]{display:none}
.op-rsv-bar{height:6px;border-radius:999px;background:#f3d4d8;overflow:hidden}.op-rsv-bar i{display:block;width:25%;height:100%;border-radius:999px;background:#d62133}
.op-rsv-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.op-rsv-st{display:flex;align-items:flex-start;gap:10px}.op-rsv-st>div{display:flex;flex-direction:column;gap:2px}
.op-rsv-dot{flex:none;width:10px;height:10px;margin-top:4px;border-radius:50%;border:2px solid #d4a1a8;background:#fff}.op-rsv-st.is-now .op-rsv-dot{border-color:#d62133;background:#d62133}
.op-rsv-st small{font-size:12px;font-weight:600;color:#6b6b6b}.op-rsv-st b{font-size:18px;font-weight:800;white-space:nowrap;color:#1a1a1a}.op-rsv-st:not(.is-now) b{color:#55534e;font-size:16px}.op-rsv-st .ccy{font-size:11px;font-weight:700;color:#6b6b6b}
.op-rsv-n{margin:0;font-size:12px;line-height:1.5;color:#6b6b6b}
.op-pay-methods+.op-rsv-box+.op-secure-note,.op-rsv-box+.op-secure-note{margin-top:14px}
.o5[data-theme=dark] .op-rsv-box{background:#2a0f13}.o5[data-theme=dark] .op-rsv-bar{background:#4a1a20}.o5[data-theme=dark] .op-rsv-st b{color:#fff}.o5[data-theme=dark] .op-rsv-st:not(.is-now) b{color:#c9c6bf}.o5[data-theme=dark] .op-rsv-dot{background:#000}
@media (max-width:640px){.op-pay-methods{grid-template-columns:minmax(0,1fr)}.op-rsv-box{padding:4px 16px 16px}.op-rsv-steps{grid-template-columns:minmax(0,1fr)}}
.op-rsv-st small{white-space:nowrap;line-height:1.3}.op-rsv-st b{line-height:1.2;display:block}.op-rsv-st>div{min-width:0}
.op-rsv-st:last-child{justify-content:flex-end;text-align:end}.op-rsv-st:last-child>div{align-items:flex-end}
.op-rsv-bar{margin-top:2px}
@media (max-width:640px){.op-rsv-st:last-child{justify-content:flex-start;text-align:start}.op-rsv-st:last-child>div{align-items:flex-start}}
/* device viewer v2 */
.oep-dev{z-index:99990!important;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:rgba(18,18,18,.82)!important;backdrop-filter:blur(4px)}
.oep-ctl{z-index:100000!important}
.oep-dev-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:13px;font-weight:700}
.oep-dev-bar span{opacity:.8}
.oep-dev-x{display:inline-flex!important;align-items:center;gap:6px;height:38px!important;padding:0 16px!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:999px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font:inherit;font-size:13px!important;font-weight:800!important;cursor:pointer}
.oep-dev-x:hover{background:#fff!important;color:#1a1a1a!important}
.oep-dev-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.oep-dev-f{flex:none;box-sizing:border-box;padding:12px!important;border-radius:48px!important;background:#0c0c0c!important;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform-origin:center center}
.oep-dev-f.is-tablet{border-radius:36px!important}
.oep-dev-f iframe{display:block;border:0;border-radius:36px!important;background:#fefdfb}
.oep-dev-f.is-tablet iframe{border-radius:24px!important}
/* responsive fixes */
@media (max-width:1080px){.st-main{grid-template-columns:minmax(0,1fr)!important}.st-main>*{min-width:0}.st-summary{max-width:none!important}}

/* ===== phone ===== */
@media (max-width:640px){
.st-wrap,.st-page,.op-wrap,main.st-main,.st-main{padding-left:0!important;padding-right:0!important}
body.o5 .st-header{padding:0 16px!important;margin-top:4px}
body.o5 .st-header h1{font-size:26px!important;line-height:1.15}
.op-section-card{border-radius:22px!important}
.op-section-card>header,.op-section-card-head{padding:18px 16px!important}
.op-section-card>header h2,.op-section-card-head h2{font-size:19px!important}
.op-section-card-body{padding:16px!important}
.op-date-strip,.op-dates{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;margin:0 -16px;padding:2px 16px 6px;scrollbar-width:none;scroll-snap-type:x mandatory}
.op-date-strip::-webkit-scrollbar,.op-dates::-webkit-scrollbar{display:none}
.op-date-pill{flex:none!important;width:62px!important;min-width:62px!important;scroll-snap-align:start}
/* THE TIME RAIL KEEPS ITS HEIGHT WHILE THE DATE CHANGES.
   This was a three-column grid on phones, so the rail's height tracked how
   many times the chosen date happens to have: MEASURED at 390, a date with
   ten times laid them on four rows and stood 204px tall, a date with one
   stood 48px. Choosing a date therefore moved everything below it by up to
   156px, which is the jump Mac saw -- and only on a phone, because at 1440
   the rail is a one-row scroller and never changes height.
   The design's rail is a horizontal scroller of CONSTANT height (measured:
   50px at every date), and the DATE strip three lines above is already one
   here. So the time strip becomes one too: one row, scrolled sideways, so
   its height no longer depends on the data. */
.op-time-strip{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;scrollbar-width:none}
.op-time-strip::-webkit-scrollbar{display:none}
.op-time-strip .op-time-pill{flex:none!important}
.op-time-pill{justify-content:center;padding:12px 8px!important}
.op-limit{padding:10px 12px!important;gap:10px!important;font-size:12.5px!important;border-radius:16px!important}
.op-tier .op-row-main{grid-template-columns:auto minmax(0,1fr)!important;gap:10px 12px!important;padding:12px!important}
.op-tier .op-row-r{grid-column:1/-1!important;display:flex!important;justify-content:flex-start!important;gap:10px!important;padding-top:10px;border-top:1px dashed #ece9e2}
.op-tier .op-row-price{margin-inline-end:auto}
.op-tier .stv-pill{height:38px!important}.op-tier .stv-pill.is-step{min-width:112px}
.op-tier-d{padding:0 12px 14px!important}
.adx-h{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:"ic m sw" "pr pr cv"!important;gap:10px 12px!important;padding:12px!important;align-items:center}
.adx-h>.adx-ic{grid-area:ic;width:38px!important;height:38px!important}
.adx-h>.adx-m{grid-area:m;min-width:0}
.adx-h>.adx-pr{grid-area:pr;grid-column:1/3!important;grid-row:2!important;flex-direction:row!important;align-items:baseline!important;justify-content:flex-start;gap:6px;min-width:0!important;padding-top:10px;border-top:1px dashed #ece9e2}
.adx-h>.adx-sw{grid-area:sw;grid-column:3!important;grid-row:1!important}
.adx-h>.adx-cv{grid-area:cv;grid-column:3!important;grid-row:2!important;justify-self:end;margin-top:10px}
.adx-t{flex-wrap:wrap!important;gap:4px 6px!important}.adx-t b{white-space:normal!important;font-size:15px!important}
.adx-tip{left:auto!important;right:-60px;transform:translateY(4px)!important;width:230px}.adx-i:hover .adx-tip,.adx-i.is-o .adx-tip{transform:none!important}.adx-tip::after{left:auto;right:66px}
.adx-d{padding:0 12px 14px!important}
.co-fields.two{grid-template-columns:minmax(0,1fr)!important}
.co-member-banner,[data-member-banner]{flex-wrap:wrap;gap:8px!important;padding:10px 12px!important}
.co-member-banner .mb-line,[data-member-banner] .mb-line{flex:1 1 200px;min-width:0;overflow-wrap:anywhere;font-size:13px}
[data-auth-tab]{font-size:13.5px!important;padding:0 10px!important}
.co-field-row,.co-verify-row{gap:8px!important}
.op-pay-pill{padding:14px 16px!important}
.op-rsv-box{padding:4px 16px 16px!important}
.op-terms{font-size:13px!important}
.st-main-r{margin-top:6px}
.st-summary{border-radius:22px!important}
.o5-footer-grid,.o5-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px 16px!important}
.o5-footer-bottom{flex-direction:column;align-items:flex-start;gap:10px}
.op-timer,.op-countdown{padding:10px 12px!important;gap:10px!important}
.op-mode{flex-wrap:wrap;gap:10px!important;padding:14px 16px!important}
}
/* ===== tablet ===== */
@media (min-width:641px) and (max-width:1080px){
.st-main{gap:20px!important}
.op-section-card-body{padding:22px!important}
.st-main-r{position:static!important}
.st-summary{max-width:none!important}
.op-pay-methods{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:640px){
.st-main{padding:0 12px!important}
.op-pay-methods{grid-template-columns:minmax(0,1fr)!important}
.op-pay-pill{justify-content:flex-start!important;text-align:start}
.st-summary-band .pref,.op-grand-total-lbl,.op-grand-total-lbl b{white-space:nowrap}
.st-summary-band{gap:10px;flex-wrap:nowrap}
.o5-footer{padding-left:16px!important;padding-right:16px!important}
.o5-footer-inner{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px 16px!important}
.o5-footer-inner>.o5-footer-brand{grid-column:1/-1}
.o5-footer-inner>.o5-footer-col:last-child{grid-column:1/-1}
.o5-footer-bottom{padding-left:16px!important;padding-right:16px!important}
.o5-top{padding-left:12px!important;padding-right:12px!important}
}
@media (min-width:641px) and (max-width:1080px){
.st-main{padding:0!important}
.o5-footer-inner{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:28px 24px!important}.o5-footer-inner>.o5-footer-brand{grid-column:1/-1}
}
.op-grand-total-lbl,.op-grand-total-lbl b,.st-summary-band .pref,.oh-pay-chip,.o5-footer-col [style*="flex-wrap"]>span{white-space:nowrap}
@media (max-width:640px){.o5-footer-bottom>div{gap:10px 14px!important}}
/* confirmation phone/tablet */
.pc-foot-btn,.oc-card a,.oc-card button{white-space:nowrap}
.pc-foot{flex-wrap:wrap}
@media (max-width:640px){
.oc-wrap{padding-left:12px!important;padding-right:12px!important}
.ocx-row{display:grid!important;grid-template-columns:44px minmax(0,1fr)!important;grid-template-areas:"th m" "r r"!important;gap:10px 12px!important;align-items:start!important;padding:14px!important}
.ocx-row>.ocx-th,.ocx-row>[class*="ocx-ic"],.ocx-row>span:first-child{grid-area:th;width:44px!important;height:44px!important}
.ocx-row>.ocx-m{grid-area:m;min-width:0}
.ocx-row>.ocx-r{grid-area:r;grid-column:1/-1!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px;padding-top:10px;border-top:1px dashed #ece9e2}
.ocx-row>.ocx-r .ad-btn,.ocx-row>.ocx-r button,.ocx-row>.ocx-r a{flex:none}
.pc-foot{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important}.pc-foot>*{justify-content:center;padding:0 12px!important}
.oc-details-card .pc-foot,.od+div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
}
@media (max-width:640px){.pc-foot>*{height:46px!important;min-height:46px;display:inline-flex!important;align-items:center}}
/* tablet + phone: sticky cart at bottom */
@media (max-width:1080px){
body.o5{padding-bottom:84px}
#opCartSidebar{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;z-index:900;margin:0!important;padding:0 16px calc(12px + env(safe-area-inset-bottom));pointer-events:none}
#opCartSidebar .st-summary{pointer-events:auto;max-width:760px!important;margin:0 auto;border-radius:22px!important;box-shadow:0 -10px 40px -16px rgba(0,0,0,.35);overflow:hidden}
#opCartSidebar .st-summary-band{cursor:pointer;position:relative}
#opCartSidebar .st-summary-band::after{content:"";position:absolute;top:7px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:999px;background:rgba(255,255,255,.45)}
#opCartSidebar .st-summary-body{max-height:0;overflow:hidden;transition:max-height .32s cubic-bezier(.3,.7,.3,1)}
#opCartSidebar.is-open .st-summary-body{max-height:min(68vh,640px);overflow-y:auto;overscroll-behavior:contain}
/* THE CART ON A PHONE IS THE SHEET, AND ONLY THE SHEET (Mac, 2026-10-14).
   The inline copy carries the same cart lines 2,756px down the page and the
   same promo form the sheet has, so hiding it loses nothing and stops the cart
   appearing twice. It goes inside this media block deliberately: the desktop
   rail IS #opCartSidebar, and a rule written outside the query would empty the
   desktop page. */
.order-info.mobile{display:none!important}
/* The overlay is the sign-in drawer's, because that is the drawer pattern this
   design already has -- same dim and the same 2px blur, so the two read as one
   family. Below the sheet's z-index, above everything else. */
.st-sheet-overlay{position:fixed;inset:0;background:rgba(20,20,20,0.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:899}
.st-sheet-overlay.is-open{opacity:1;pointer-events:auto}
/* The band is a control now, so it says so to a keyboard as well as a thumb. */
#opCartSidebar .st-summary-band{-webkit-appearance:none;appearance:none;border:0;width:100%;text-align:inherit;font:inherit;color:inherit}
#opCartSidebar .st-summary-band:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.ost-cart-dim{position:fixed;inset:0;z-index:899;background:rgba(20,20,20,.4);opacity:0;pointer-events:none;transition:opacity .25s}
#opCartSidebar.is-open~.ost-cart-dim,.ost-cart-dim.is-on{opacity:1;pointer-events:auto}
}
/* collapsed cart: no white strip */
@media (max-width:1080px){#opCartSidebar:not(.is-open) .st-summary-body{padding-top:0!important;padding-bottom:0!important;border:0!important}#opCartSidebar .st-summary{padding:0!important}}
/* phone: cart docked full-width at bottom */
@media (max-width:640px){
body.o5{padding-bottom:76px}
#opCartSidebar{padding:0!important}
#opCartSidebar .st-summary{max-width:none!important;border-radius:20px 20px 0 0!important;box-shadow:0 -8px 30px -12px rgba(0,0,0,.35)}
#opCartSidebar .st-summary-band{padding:16px 18px calc(16px + env(safe-area-inset-bottom))!important;border-radius:0!important}
#opCartSidebar.is-open .st-summary-body{max-height:72vh}
}
/* phone: buyer information */
@media (max-width:640px){
.co-tabbar{padding:4px!important;gap:4px!important}
.co-tab{height:44px!important;min-height:44px;padding:0 8px!important;font-size:14px!important;line-height:1.1!important;white-space:nowrap;border-radius:999px!important}
[data-member-banner]{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:10px!important;padding:8px 8px 8px 10px!important;border-radius:999px!important}
[data-member-banner] .mb-line{flex:1 1 auto!important;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px!important}
[data-member-banner] .mb-email{display:none}
[data-member-banner] .mb-switch{flex:none;height:34px;padding:0 14px!important;font-size:12.5px!important}
.co-field-row{display:flex!important;gap:8px!important}
.co-field-row>.co-ctl{flex:1 1 auto;min-width:0}
.co-verify{flex:none!important;width:auto!important;min-width:0!important;padding:0 14px!important;font-size:13px!important;white-space:nowrap}
.co-verify .verified-text{gap:4px}
.co-verify.is-verified{width:46px!important;padding:0!important;justify-content:center}
.co-verify.is-verified .verified-text{font-size:0!important;gap:0}.co-verify.is-verified .verified-text svg{width:16px;height:16px}
.co-phone-cc{padding:0 8px 0 14px!important;gap:5px!important}
.co-phone-ctl input{padding-inline:12px 40px!important;min-width:0}
.co-ctl input{min-width:0;text-overflow:ellipsis}
}
@media (max-width:640px){.co-verify.is-verified{height:46px!important;min-height:46px;border-radius:50%!important;display:inline-flex!important;align-items:center}.co-verify{height:46px!important;align-self:flex-start}}
/* phone cart bar v2: floating pill */
@media (max-width:640px){
body.o5{padding-bottom:96px}
#opCartSidebar{padding:0 12px 14px!important}
#opCartSidebar .st-summary{border-radius:24px!important;box-shadow:0 14px 34px -10px rgba(214,33,51,.45),0 2px 8px rgba(0,0,0,.12)!important;border:0!important;outline:0!important}
#opCartSidebar .st-summary-band{padding:12px 14px 12px 18px!important;min-height:60px;border-radius:24px!important;display:flex!important;align-items:center!important;gap:12px}
#opCartSidebar.is-open .st-summary-band{border-radius:24px 24px 0 0!important}
#opCartSidebar .st-summary-band::after{display:none}
#opCartSidebar .st-summary-band .pref{display:inline-flex;align-items:center;gap:8px;font-size:15px!important;font-weight:800}
#opCartSidebar .st-summary-band .band-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;font-size:12px;border-radius:999px}
#opCartSidebar .st-summary-band-r{display:inline-flex!important;align-items:center;gap:10px;margin-inline-start:auto}
#opCartSidebar .st-summary-band-r .band-label{display:none!important}
#opCartSidebar .st-summary-band-r .amt{font-size:20px!important;font-weight:800;white-space:nowrap;line-height:1}
#opCartSidebar .st-summary-band-r .amt .ccy{font-size:11px!important;margin-inline-end:3px;opacity:.85}
#opCartSidebar .st-summary-band-r::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s}
#opCartSidebar.is-open .st-summary-band-r::after{transform:rotate(180deg)}
}
@media (max-width:640px){#opCartSidebar .st-summary-band-r{flex-direction:row!important;flex-wrap:nowrap!important}#opCartSidebar .st-summary-band-r .amt{display:inline-flex!important;align-items:baseline}#opCartSidebar .st-summary-band{flex-wrap:nowrap!important;justify-content:space-between}}
/* tablet cart = phone pill */
@media (min-width:641px) and (max-width:1080px){
body.o5{padding-bottom:96px}
#opCartSidebar{padding:0 12px 14px!important}
#opCartSidebar .st-summary{border-radius:24px!important;box-shadow:0 14px 34px -10px rgba(214,33,51,.45),0 2px 8px rgba(0,0,0,.12)!important;border:0!important;outline:0!important}
#opCartSidebar .st-summary-band{padding:12px 14px 12px 18px!important;min-height:60px;border-radius:24px!important;display:flex!important;align-items:center!important;gap:12px}
#opCartSidebar.is-open .st-summary-band{border-radius:24px 24px 0 0!important}
#opCartSidebar .st-summary-band::after{display:none}
#opCartSidebar .st-summary-band .pref{display:inline-flex;align-items:center;gap:8px;font-size:15px!important;font-weight:800}
#opCartSidebar .st-summary-band .band-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;font-size:12px;border-radius:999px}
#opCartSidebar .st-summary-band-r{display:inline-flex!important;align-items:center;gap:10px;margin-inline-start:auto}
#opCartSidebar .st-summary-band-r .band-label{display:none!important}
#opCartSidebar .st-summary-band-r .amt{font-size:20px!important;font-weight:800;white-space:nowrap;line-height:1}
#opCartSidebar .st-summary-band-r .amt .ccy{font-size:11px!important;margin-inline-end:3px;opacity:.85}
#opCartSidebar .st-summary-band-r::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .25s}
#opCartSidebar.is-open .st-summary-band-r::after{transform:rotate(180deg)}
#opCartSidebar .st-summary-band-r{flex-direction:row!important;flex-wrap:nowrap!important}#opCartSidebar .st-summary-band-r .amt{display:inline-flex!important;align-items:baseline}#opCartSidebar .st-summary-band{flex-wrap:nowrap!important;justify-content:space-between}}
#opCartSidebar{padding:0 20px 18px!important}
#opCartSidebar .st-summary{max-width:760px!important}
body.o5{padding-bottom:104px}
}
#opMode[hidden]{display:none!important}
/* guest fields: look active */
[data-buyer-card][data-auth-state=guest] .co-ctl,[data-buyer-card][data-auth-state=guest] [data-trigger]{border:1px solid #d4d2cb!important;background:#fff!important;transition:border-color .15s,box-shadow .15s}
[data-buyer-card][data-auth-state=guest] .co-ctl:hover,[data-buyer-card][data-auth-state=guest] [data-trigger]:hover{border-color:#9a9893!important}
[data-buyer-card][data-auth-state=guest] .co-ctl:focus-within,[data-buyer-card][data-auth-state=guest] [data-trigger]:focus-visible,[data-buyer-card][data-auth-state=guest] [data-trigger].is-open{border-color:#1a1a1a!important;box-shadow:0 0 0 1px #1a1a1a!important}
[data-buyer-card][data-auth-state=guest] .co-ctl input::placeholder{color:#6b6b6b!important;opacity:1}
[data-buyer-card][data-auth-state=guest] [data-label].is-placeholder{color:#6b6b6b!important}
[data-buyer-card][data-auth-state=guest] .co-ctl input,[data-buyer-card][data-auth-state=guest] [data-trigger]{cursor:text;color:#1a1a1a}
[data-buyer-card][data-auth-state=guest] [data-trigger]{cursor:pointer}
[data-buyer-card][data-auth-state=guest] [data-trigger] svg{color:#1a1a1a!important;opacity:1!important}
[data-buyer-card][data-auth-state=guest] .co-phone-cc{color:#1a1a1a}
[data-buyer-card][data-auth-state=guest] .co-verify:not(.is-verified){background:#1a1a1a!important;color:#fff!important;border-color:#1a1a1a!important}
[data-buyer-card][data-auth-state=guest] .co-verify:not(.is-verified):hover{background:#333!important}
[data-buyer-card][data-auth-state=guest] .co-help,[data-buyer-card][data-auth-state=guest] .co-field>p,[data-buyer-card][data-auth-state=guest] .co-hint{color:#6b6b6b!important}
.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] .co-ctl,.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] [data-trigger]{background:#000!important;border-color:#3a3a3a!important}
.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] .co-ctl input,.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] [data-trigger],.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] [data-trigger] svg,.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] .co-phone-cc{color:#fff!important}
.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] .co-ctl input::placeholder,.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] [data-label].is-placeholder{color:#9a9893!important}
.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] .co-verify:not(.is-verified){background:#fff!important;color:#000!important;border-color:#fff!important}
/* guest: become a member */
[data-buyer-card]:not([data-auth-state=guest]) .co-join{display:none}
.co-join{margin:4px 0 14px;border:1px solid #ececec;border-radius:20px;background:#fefdfb;transition:border-color .18s,background .18s}
.co-join.is-on{border-color:#d62133;background:#fff6f5;box-shadow:0 0 0 1px #d62133}
.co-join-h{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer}
.co-join-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:#fdecee;color:#d62133}
.co-join.is-on .co-join-ic{background:#d62133;color:#fff}
.co-join-t{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.co-join-t b{font-size:15px;font-weight:800}.co-join-t small{font-size:12.5px;color:#6b6b6b;line-height:1.45}
.co-join-in{position:absolute;opacity:0;width:1px;height:1px}
.co-join-sw{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:#e4e1d9;transition:background .18s}
.co-join-sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.co-join-in:checked~.co-join-sw{background:#d62133}.co-join-in:checked~.co-join-sw i{transform:translateX(18px)}
.co-join-in:focus-visible~.co-join-sw{box-shadow:0 0 0 3px rgba(214,33,51,.25)}
html[dir=rtl] .co-join-sw i{left:auto;right:3px}html[dir=rtl] .co-join-in:checked~.co-join-sw i{transform:translateX(-18px)}
.co-join-b{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px 70px;animation:opTierIn .2s ease-out}.co-join-b[hidden]{display:none}
.co-join-hint{margin:0;padding-inline-start:18px;font-size:12px;color:#6b6b6b}.co-join-hint.is-ok{color:#1f8a5b}
.co-join-ok{display:flex;align-items:center;gap:6px;margin:2px 0 0;font-size:12.5px;font-weight:700;color:#1f8a5b}
.o5[data-theme=dark] .co-join{background:#000;border-color:#2a2a2a}.o5[data-theme=dark] .co-join.is-on{background:#2a0f13;border-color:#d62133}.o5[data-theme=dark] .co-join-ic{background:#2a0f13}.o5[data-theme=dark] .co-join-sw{background:#2a2a2a}.o5[data-theme=dark] .co-join-t small{color:#9a9893}
@media (max-width:640px){.co-join-h{gap:12px;padding:12px}.co-join-t b{font-size:14px}.co-join-b{padding:0 12px 14px}}
/* all picker highlights: green */
.op-date-pill.is-on,.op-time-pill.is-on,.op-pay-pill.is-on{background:#eef8f2!important;border-color:#1f8a5b!important}
.op-pay-pill.is-on .radio{border-color:#1f8a5b!important}.op-pay-pill.is-on .radio::after{background:#1f8a5b!important}
.op-tier-list .op-row.op-tier.is-on,.op-tier-list .op-row.op-tier.is-on:hover,.adx-card.is-on,.adx-card.is-on:hover{border-color:#1f8a5b!important;box-shadow:0 0 0 1px #1f8a5b!important;background:#f1f8f4!important}
.op-tier.is-on .op-tier-ic,.adx-card.is-on .adx-ic,.adx-card.is-on:hover .adx-ic{background:#1f8a5b!important;color:#fff!important}
.op-tier.is-on .op-tier-p{border-top-color:#cfe6d9!important}.op-tier.is-on ul.op-tier-inc li{border-color:#cfe6d9!important}
.adx-card.is-on .adx-d{background:#e6f2eb!important}
.adx-card.is-on .adx-sw,.adx-sw.is-on{background:#1f8a5b!important}.adx-card.is-on .adx-swl>span{color:#1f8a5b!important}
.op-pay-pill.op-pay-rsv.is-on{border-color:#1f8a5b!important}
.op-rsv-box{border-color:#1f8a5b!important;background:#eef8f2!important}.op-rsv-bar{background:#cfe6d9!important}.op-rsv-bar i,.op-rsv-st.is-now .op-rsv-dot{background:#1f8a5b!important;border-color:#1f8a5b!important}.op-rsv-dot{border-color:#9bcdb3!important}
.co-join.is-on{border-color:#1f8a5b!important;background:#f1f8f4!important;box-shadow:0 0 0 1px #1f8a5b!important}.co-join.is-on .co-join-ic{background:#1f8a5b!important;color:#fff!important}
.co-join-in:checked~.co-join-sw,.op-terms-in:checked~.op-terms-sw{background:#1f8a5b!important}
.o5[data-theme=dark] .op-date-pill.is-on,.o5[data-theme=dark] .op-time-pill.is-on,.o5[data-theme=dark] .op-pay-pill.is-on,.o5[data-theme=dark] .op-tier-list .op-row.op-tier.is-on,.o5[data-theme=dark] .adx-card.is-on,.o5[data-theme=dark] .op-rsv-box,.o5[data-theme=dark] .co-join.is-on{background:#0f2a1d!important}
.o5[data-theme=dark] .adx-card.is-on .adx-d{background:#0b2017!important}
/* all picker highlights: black (ink) */
.op-date-pill.is-on,.op-time-pill.is-on,.op-pay-pill.is-on{background:#f7f5f0!important;border-color:#1a1a1a!important;box-shadow:0 0 0 1px #1a1a1a inset!important}
.op-pay-pill.is-on .radio{border-color:#1a1a1a!important}.op-pay-pill.is-on .radio::after{background:#1a1a1a!important}
.op-tier-list .op-row.op-tier.is-on,.op-tier-list .op-row.op-tier.is-on:hover,.adx-card.is-on,.adx-card.is-on:hover{border-color:#1a1a1a!important;box-shadow:0 0 0 1px #1a1a1a!important;background:#f7f5f0!important}
.op-tier.is-on .op-tier-ic,.adx-card.is-on .adx-ic,.adx-card.is-on:hover .adx-ic{background:#1a1a1a!important;color:#fff!important}
.op-tier.is-on .op-tier-p{border-top-color:#e4e1d9!important}.op-tier.is-on ul.op-tier-inc li{border-color:#e4e1d9!important}
.adx-card.is-on .adx-d{background:#efede7!important}
.op-pay-pill.op-pay-rsv.is-on{border-color:#1a1a1a!important}
.op-rsv-box{border-color:#1a1a1a!important;background:#f7f5f0!important}.op-rsv-bar{background:#e4e1d9!important}.op-rsv-bar i,.op-rsv-st.is-now .op-rsv-dot{background:#1a1a1a!important;border-color:#1a1a1a!important}.op-rsv-dot{border-color:#b7b4ad!important}
.co-join.is-on{border-color:#1a1a1a!important;background:#f7f5f0!important;box-shadow:0 0 0 1px #1a1a1a!important}.co-join.is-on .co-join-ic{background:#1a1a1a!important;color:#fff!important}
.o5[data-theme=dark] .op-date-pill.is-on,.o5[data-theme=dark] .op-time-pill.is-on,.o5[data-theme=dark] .op-pay-pill.is-on,.o5[data-theme=dark] .op-tier-list .op-row.op-tier.is-on,.o5[data-theme=dark] .adx-card.is-on,.o5[data-theme=dark] .op-rsv-box,.o5[data-theme=dark] .co-join.is-on{background:#141414!important;border-color:#fff!important;box-shadow:0 0 0 1px #fff!important}
.o5[data-theme=dark] .op-tier.is-on .op-tier-ic,.o5[data-theme=dark] .adx-card.is-on .adx-ic,.o5[data-theme=dark] .co-join.is-on .co-join-ic{background:#fff!important;color:#000!important}
.o5[data-theme=dark] .op-pay-pill.is-on .radio{border-color:#fff!important}.o5[data-theme=dark] .op-pay-pill.is-on .radio::after,.o5[data-theme=dark] .op-rsv-bar i,.o5[data-theme=dark] .op-rsv-st.is-now .op-rsv-dot{background:#fff!important;border-color:#fff!important}
.o5[data-theme=dark] .adx-card.is-on .adx-d{background:#0d0d0d!important}
/* member banner v2 */
.co-join{position:relative;overflow:hidden;border:0!important;border-radius:22px!important;background:#1a1a1a!important;color:#fff;box-shadow:0 18px 36px -24px rgba(0,0,0,.55)!important}
.co-join::before{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(214,33,51,.55),rgba(214,33,51,0));pointer-events:none}
.co-join-h{position:relative;padding:18px 18px 18px 18px!important;gap:16px!important;align-items:center}
.co-join-ic{width:48px!important;height:48px!important;border-radius:14px!important;background:#d62133!important;color:#fff!important;box-shadow:0 8px 18px -8px rgba(214,33,51,.7)}
.co-join-k{display:inline-flex;align-self:flex-start;height:20px;padding:0 8px;margin-bottom:4px;border-radius:999px;background:rgba(255,255,255,.12);font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;line-height:20px}
.co-join-t b{font-size:16.5px!important;color:#fff;letter-spacing:-.01em}
.co-join-t small{color:rgba(255,255,255,.72)!important;font-size:13px!important}
.co-join-perks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.co-join-perks span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);font-size:11.5px;font-weight:700;color:#fff}
.co-join-perks span::before{content:"";width:6px;height:6px;border-radius:50%;background:#3ccf8e}
.co-join-sw{background:rgba(255,255,255,.18)!important}
.co-join-in:checked~.co-join-sw{background:#1f8a5b!important}
.co-join.is-on{background:#1a1a1a!important;box-shadow:0 0 0 2px #1f8a5b,0 18px 36px -24px rgba(0,0,0,.55)!important}
.co-join.is-on .co-join-ic{background:#1f8a5b!important;box-shadow:0 8px 18px -8px rgba(31,138,91,.7)}
.co-join-b{position:relative;padding:0 18px 18px 82px!important}
.co-join-ok{color:#8fe0b8!important}
.o5[data-theme=dark] .co-join{background:#fff!important;color:#1a1a1a}.o5[data-theme=dark] .co-join-t b,.o5[data-theme=dark] .co-join-k,.o5[data-theme=dark] .co-join-perks span{color:#1a1a1a!important}.o5[data-theme=dark] .co-join-t small{color:#55534e!important}.o5[data-theme=dark] .co-join-k{background:#f4f2ec}.o5[data-theme=dark] .co-join-perks span{border-color:#e4e1d9}.o5[data-theme=dark] .co-join-sw{background:#e4e1d9!important}.o5[data-theme=dark] .co-join.is-on{background:#fff!important}.o5[data-theme=dark] .co-join-ok{color:#1f8a5b!important}
@media (max-width:640px){.co-join-h{padding:14px!important;gap:12px!important;align-items:flex-start}.co-join-ic{width:40px!important;height:40px!important}.co-join-t b{font-size:15px!important}.co-join-sw{margin-top:4px}.co-join-b{padding:0 14px 14px!important}}
.co-join-perks span{white-space:nowrap;line-height:1}
.co-join::before{inset:-80px -60px auto auto;width:260px;height:260px;background:radial-gradient(closest-side,rgba(214,33,51,.32),rgba(214,33,51,0))}
.co-join-k{line-height:1;align-items:center}
/* member banner v3: white */
.co-join{background:#fff!important;color:#1a1a1a;border:1px solid #ececec!important;box-shadow:0 18px 40px -28px rgba(0,0,0,.35)!important}
.co-join::before{inset:-90px -70px auto auto;width:280px;height:280px;background:radial-gradient(closest-side,rgba(214,33,51,.10),rgba(214,33,51,0))}
.co-join-k{background:#fdecee!important;color:#d62133!important}
.co-join-t b{color:#1a1a1a!important}
.co-join-t small{color:#6b6b6b!important}
.co-join-perks span{border-color:#ececec!important;background:#fefdfb;color:#1a1a1a!important}
.co-join-perks span::before{background:#1f8a5b}
.co-join-sw{background:#e4e1d9!important}
.co-join.is-on{background:#fff!important;border-color:#1f8a5b!important;box-shadow:0 0 0 1px #1f8a5b,0 18px 40px -28px rgba(0,0,0,.35)!important}
.co-join-ok{color:#1f8a5b!important}
.o5[data-theme=dark] .co-join{background:#000!important;border-color:#2a2a2a!important}.o5[data-theme=dark] .co-join-t b,.o5[data-theme=dark] .co-join-perks span{color:#fff!important}.o5[data-theme=dark] .co-join-t small{color:#9a9893!important}.o5[data-theme=dark] .co-join-k{background:#2a0f13!important;color:#ff6b78!important}.o5[data-theme=dark] .co-join-perks span{background:#111;border-color:#2a2a2a!important}.o5[data-theme=dark] .co-join-sw{background:#2a2a2a!important}.o5[data-theme=dark] .co-join.is-on{background:#000!important}.o5[data-theme=dark] .co-join-ok{color:#8fe0b8!important}
/* member banner v4: cream */
.co-join,.co-join.is-on{background:#f7f5f0!important;border-color:#ebe7de!important}
.co-join.is-on{border-color:#1f8a5b!important}
.co-join::before{background:radial-gradient(closest-side,rgba(214,33,51,.08),rgba(214,33,51,0))}
.co-join-perks span{background:#fff!important;border-color:#e8e4da!important}
.co-join-sw{background:#e2ddd2!important}
/* guest issues v2 */
.co-guest-issues{display:flex;flex-direction:column;gap:12px;margin:12px 0 0!important;padding:14px 16px;border-radius:18px;background:#f7f5f0;color:#1a1a1a!important;font-size:13px;font-style:normal}
.co-guest-issues[hidden]{display:none}
.co-iss-h{display:flex;align-items:center;gap:12px}
.co-iss-ring{--p:0;position:relative;display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:conic-gradient(#1a1a1a calc(var(--p)*1%),#e4e1d9 0)}
.co-iss-ring::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#f7f5f0}
.co-iss-ring b{position:relative;font-size:12.5px;font-weight:800}
.co-iss-t{display:flex;flex-direction:column;gap:1px}.co-iss-t b{font-size:14px;font-weight:800}.co-iss-t small{font-size:12.5px;color:#6b6b6b}
.co-iss-l{display:flex;flex-wrap:wrap;gap:6px}
.co-iss-c{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border:1px solid #e4e1d9;border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;color:#1a1a1a;white-space:nowrap}
.co-iss-c::before{content:"";width:6px;height:6px;border-radius:50%;background:#d62133}
.co-iss-c.is-warn{white-space:normal;height:auto;padding:6px 11px 6px 9px;border-color:#f3c2c8;background:#fdf1f2;color:#b91c2c}
.o5[data-theme=dark] .co-guest-issues{background:#141414;color:#fff!important}.o5[data-theme=dark] .co-iss-ring::before{background:#141414}.o5[data-theme=dark] .co-iss-ring{background:conic-gradient(#fff calc(var(--p)*1%),#2a2a2a 0)}.o5[data-theme=dark] .co-iss-c{background:#000;border-color:#2a2a2a;color:#fff}.o5[data-theme=dark] .co-iss-t small{color:#9a9893}
/* verify: cream with black text */
[data-buyer-card][data-auth-state=guest] .co-verify:not(.is-verified){background:#f4f2ec!important;color:#1a1a1a!important;border:1px solid #e4e1d9!important}
[data-buyer-card][data-auth-state=guest] .co-verify:not(.is-verified):hover{background:#ebe8e0!important;border-color:#1a1a1a!important}
.o5[data-theme=dark] [data-buyer-card][data-auth-state=guest] .co-verify:not(.is-verified){background:#1f1f1f!important;color:#fff!important;border-color:#3a3a3a!important}
/* duplicate "Country" chips: name them */
/* login panel: stronger borders */
[data-auth-panel="login"] [data-auth-apple],[data-auth-panel="login"] [data-auth-google],[data-auth-panel="login"] .co-ctl,[data-auth-panel="login"] .co-social,[data-auth-panel="login"] button.co-sso{border:1px solid #d4d2cb!important}
[data-auth-panel="login"] [data-auth-apple]:hover,[data-auth-panel="login"] [data-auth-google]:hover{border-color:#1a1a1a!important}
[data-auth-panel="login"] .co-ctl:focus-within{border-color:#1a1a1a!important;box-shadow:0 0 0 1px #1a1a1a!important}
.o5[data-theme=dark] [data-auth-panel="login"] [data-auth-apple],.o5[data-theme=dark] [data-auth-panel="login"] [data-auth-google],.o5[data-theme=dark] [data-auth-panel="login"] .co-ctl{border-color:#3a3a3a!important}
/* reserve v3 */
.op-pay-pill.op-pay-rsv.is-on{border-radius:18px 18px 0 0!important;border-bottom-color:transparent!important;box-shadow:none!important}
.op-rsv-box{margin-top:-13px!important;padding:6px 16px 16px!important;border:1.5px solid #1a1a1a!important;border-top:0!important;border-radius:0 0 18px 18px!important;background:#f7f5f0!important;gap:12px!important}
.op-rsv-bar,.op-rsv-steps{display:none!important}
.op-rsv-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.op-rsv-c{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid #ebe7de;min-width:0}
.op-rsv-c.is-now{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.op-rsv-tag{font-size:11.5px;font-weight:700;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-rsv-c.is-now .op-rsv-tag{color:rgba(255,255,255,.7)}
.op-rsv-c b{font-size:19px;font-weight:800;white-space:nowrap;line-height:1}.op-rsv-c .ccy{font-size:11px;font-weight:700;opacity:.7}
.op-rsv-c:not(.is-now) b{color:#55534e}
.op-rsv-n{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12px;line-height:1.5;color:#6b6b6b}.op-rsv-n svg{flex:none;margin-top:2px}
.o5[data-theme=dark] .op-rsv-c{background:#000;border-color:#2a2a2a}.o5[data-theme=dark] .op-rsv-c.is-now{background:#fff;color:#000}.o5[data-theme=dark] .op-rsv-c.is-now .op-rsv-tag{color:#55534e}.o5[data-theme=dark] .op-rsv-c:not(.is-now) b{color:#c9c6bf}.o5[data-theme=dark] .op-rsv-box{border-color:#fff!important}
@media (max-width:420px){.op-rsv-split{grid-template-columns:minmax(0,1fr)}}
/* payment pills polish */
.op-pay-pill{border:1px solid #d4d2cb!important;border-radius:18px!important;min-height:58px;outline:none!important;transition:border-color .15s,background .15s}
.op-pay-pill:hover{border-color:#1a1a1a!important}
.op-pay-pill:focus-visible{box-shadow:0 0 0 3px rgba(26,26,26,.15)!important}
.op-pay-pill.is-on{border-color:#1a1a1a!important;background:#f7f5f0!important;box-shadow:0 0 0 1px #1a1a1a inset!important}
.op-pay-pill.op-pay-rsv.is-on{box-shadow:none!important;border-width:1.5px!important}
.op-pay-pill .radio{width:20px!important;height:20px!important}
.op-rsv-box{border-width:1.5px!important}
.op-rsv-n{padding-bottom:2px}.op-rsv-n span{max-width:none;flex:1}.op-rsv-box{padding-bottom:18px!important}

/* ── member banner: 10 design options (prototype tabs) ── */
.co-jv-tabs{display:flex;align-items:center;gap:3px;margin:4px 0 10px;padding:4px;border:1px solid #ececec;border-radius:999px;background:#fff;overflow-x:auto;scrollbar-width:none}.co-jv-tabs::-webkit-scrollbar{display:none}
.co-jv-l{flex:none;padding:0 8px 0 10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9a9893;white-space:nowrap}
.co-jv-tabs button{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 5px;border:0;border-radius:999px;background:none;font:inherit;font-size:12px;font-weight:700;color:#55534e;cursor:pointer;white-space:nowrap}
.co-jv-tabs button i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#f4f2ed;font-style:normal;font-size:10.5px}
.co-jv-tabs button:hover{color:#1a1a1a}.co-jv-tabs button.is-on{background:#1a1a1a;color:#fff}.co-jv-tabs button.is-on i{background:#d62133;color:#fff}
#coJoin[data-jv]{transition:background .2s,border-color .2s,box-shadow .2s}
#coJoin[data-jv="2"]{background:#fff!important;border:1px solid #e4e2dc!important;box-shadow:0 1px 2px rgba(0,0,0,.04)!important}#coJoin[data-jv="2"]::before{display:none}
#coJoin[data-jv="2"] .co-join-ic{background:#fdecee!important;color:#d62133!important;box-shadow:none!important;border-radius:50%!important}
#coJoin[data-jv="2"] .co-join-k{background:none!important;padding:0!important;height:auto;color:#d62133!important}
#coJoin[data-jv="2"] .co-join-perks span{border:0!important;background:none!important;padding:0 10px 0 0!important;color:#55534e!important;font-weight:600}
#coJoin[data-jv="2"] .co-join-perks span::before{width:14px;height:14px;background:#1f8a5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
#coJoin[data-jv="2"].is-on{border-color:#1f8a5b!important;box-shadow:0 0 0 1px #1f8a5b!important}

/* ── log in / guest: 10 design options (prototype tabs) ── */
.co-av-tabs{margin:0 0 22px!important}
#buyer .co-tab:focus{outline:none}#buyer .co-tab:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}
#buyer[data-av] .co-tab,#buyer[data-av] .co-tabbar,#buyer[data-av] .co-sso-btn,#buyer[data-av] .co-login-submit{transition:background .18s,color .18s,border-color .18s,box-shadow .18s}

.co-jv-tabs button:focus{outline:none}.co-jv-tabs button:focus-visible{outline:2px solid #1a1a1a;outline-offset:1px}
#buyer[data-av] .co-ctl,#buyer[data-av] [data-trigger],#buyer[data-av] .co-verify,#buyer[data-av] .co-sso-btn{transition:background .18s,border-color .18s,box-shadow .18s,color .18s}

/* field hints → (i) inside pills (options 2–10) */
#buyer .co-fi{display:none;flex:none;margin-inline:2px 12px;color:#a8a6a0}
#buyer [data-trigger] .co-fi,#buyer .co-trigger .co-fi{margin-inline:auto 10px}
#buyer .co-fi .gtb2-tip{inset-inline-start:auto!important;inset-inline-end:-14px;text-align:start;white-space:normal;cursor:default}
#buyer .co-fi .gtb2-tip::after{inset-inline-start:auto!important;inset-inline-end:18px}
#buyer[data-av] .co-fi{display:inline-grid}
#buyer[data-av] [data-buyer-fields] .co-hint,#buyer[data-av] [data-buyer-fields] .co-field-caption{display:none!important}
#buyer[data-av] [data-buyer-fields]{row-gap:12px}

/* fix: inner borders + phone row when (i) is inside fields */
#buyer[data-av] .co-ctl input{border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important}
#buyer[data-av] .co-phone-ctl{display:flex!important;align-items:center;flex-wrap:nowrap!important;overflow:visible}
#buyer[data-av] .co-phone-ctl .co-phone-cc{flex:none;align-self:stretch;height:auto!important;border:0!important;border-radius:999px 0 0 999px!important;border-inline-end:1px solid rgba(0,0,0,.1)!important;background:transparent!important;box-shadow:none!important}
#buyer[data-av] .co-phone-ctl input{flex:1 1 auto;padding-inline:14px 8px!important}
#buyer .co-fi,#buyer [data-trigger] .co-fi,#buyer .co-trigger .co-fi{color:#a8a6a0!important}#buyer .co-fi:hover,#buyer .co-fi:focus-visible{color:#1a1a1a!important}

/* switcher: left aligned */
#buyer .co-tabbar{margin-inline:0 auto!important;align-self:flex-start}

/* login: choose a method, email opens fields */
#buyer .co-sso-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important}
#buyer .co-sso-btn{height:52px;padding:0 14px!important;white-space:nowrap}
#buyer .co-sso-btn.is-on{border-color:#1a1a1a!important;box-shadow:0 0 0 1px #1a1a1a}
#buyer .co-email-wrap{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .32s cubic-bezier(.22,1,.36,1),opacity .2s ease}
#buyer .co-email-wrap.is-open{grid-template-rows:1fr;opacity:1}
#buyer .co-email-in{min-height:0;overflow:hidden}
#buyer .co-email-wrap .co-login-fields{padding-top:18px}
#buyer .co-email-wrap:not(.is-open) *{visibility:hidden}
@media (max-width:520px){#buyer .co-sso-btn{padding:0 8px!important;gap:6px!important;font-size:13px!important}}

/* switcher: selected tab gets the product-picker black border */
#buyer .co-tab.is-on{background:#fff!important;color:#1a1a1a!important;box-shadow:inset 0 0 0 1.5px #1a1a1a,0 4px 12px -8px rgba(0,0,0,.25)!important}

/* login panel: left aligned */
#buyer .co-tabpanel[data-auth-panel=login]{align-self:flex-start!important;margin-inline:0 auto!important;text-align:start!important}
#buyer .co-tabpanel[data-auth-panel=login] .co-lede,#buyer .co-tabpanel[data-auth-panel=login] .co-alt{text-align:start!important;justify-content:flex-start!important;margin-inline:0!important}
#buyer .co-sso-btn:focus{outline:none}#buyer .co-sso-btn:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}

/* email first; fields side by side */
#buyer .co-sso-email{order:-1}
#buyer .co-email-wrap .co-login-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important}
@media (max-width:560px){#buyer .co-email-wrap .co-login-fields{grid-template-columns:minmax(0,1fr)}}

/* email row: email · password · log in on one line */
#buyer .co-tabpanel[data-auth-panel=login]{max-width:none!important;width:100%!important}
#buyer .co-email-wrap .co-email-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;column-gap:12px;row-gap:12px}
#buyer .co-email-wrap.is-open .co-email-in{padding-top:18px;padding-bottom:2px}
#buyer .co-email-wrap .co-login-fields{display:contents!important;padding-top:0}
#buyer .co-email-wrap .co-ctl{min-height:52px!important}#buyer .co-email-wrap .co-ctl input{height:50px}
#buyer .co-email-wrap .co-login-submit{width:auto!important;height:52px;margin:0!important;padding:0 30px!important;font-size:14.5px!important;white-space:nowrap}
@media (max-width:640px){#buyer .co-email-wrap .co-email-in{grid-template-columns:minmax(0,1fr)}#buyer .co-email-wrap .co-login-submit{width:100%!important}}

#buyer .co-fi svg,#buyer [data-trigger] .co-fi svg,#buyer .co-trigger .co-fi svg{color:#a8a6a0!important;width:14px!important;height:14px!important;opacity:1!important}
#buyer .co-fi svg *{stroke:currentColor!important;fill:none!important}
#buyer .co-fi:hover svg,#buyer .co-fi:focus-visible svg{color:#1a1a1a!important}

/* 4 methods, no tab bar */
#buyer .co-tabbar,#buyer .co-alt{display:none!important}
#buyer .co-sso-list{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (max-width:640px){#buyer .co-sso-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
#buyer [data-auth-state=guest] .co-authtabs,#buyer[data-auth-state=guest] .co-authtabs{margin-bottom:18px}
#buyer [data-buyer-fields].co-reveal{animation:coReveal .38s cubic-bezier(.22,1,.36,1)}
@keyframes coReveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* SSO pop-ups (Apple / Google) */
.co-ssop{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:20px;background:rgba(20,20,20,0);transition:background .22s}
.co-ssop.is-in{background:rgba(20,20,20,.45)}
.co-ssop-card{position:relative;width:min(380px,100%);padding:30px 24px 20px;border-radius:22px;background:#fff;text-align:center;font-family:var(--o5-display);box-shadow:0 30px 60px -20px rgba(0,0,0,.45);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s,transform .3s cubic-bezier(.22,1,.36,1)}
.co-ssop.is-in .co-ssop-card{opacity:1;transform:none}
.co-ssop-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:#f4f2ed;cursor:pointer}
.co-ssop-logo{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:16px;background:#f4f2ed;color:#1a1a1a}
.co-ssop.is-apple .co-ssop-logo{background:#000;color:#fff}
.co-ssop-logo .oli-lg-google{width:24px;height:24px;border-radius:50%;background:conic-gradient(from -45deg,#ea4335 0deg 90deg,#fbbc04 90deg 180deg,#34a853 180deg 270deg,#4285f4 270deg 360deg);-webkit-mask:radial-gradient(circle 7px,#0000 98%,#000);mask:radial-gradient(circle 7px,#0000 98%,#000)}
.co-ssop h3{margin:0 0 6px;font-size:19px;font-weight:800;color:#1a1a1a}
.co-ssop-card>p{margin:0 0 18px;font-size:13.5px;color:#6b6b6b;line-height:1.45}
.co-ssop-acct{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid #e4e2dc;border-radius:16px;background:#fff;font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,background .15s}
.co-ssop-acct:hover{border-color:#1a1a1a;background:#fefdfb}.co-ssop-acct>span:nth-child(2){flex:1;display:flex;flex-direction:column}.co-ssop-acct b{font-size:14px;color:#1a1a1a}.co-ssop-acct small{font-size:12.5px;color:#6b6b6b}.co-ssop-acct svg{color:#a8a6a0}
.co-ssop-av{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#ecebe6;font-size:12.5px;font-weight:800;color:#1a1a1a;flex:none}
.co-ssop-go{width:100%;height:48px;margin-top:12px;border:0;border-radius:999px;background:#000;color:#fff;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer}.co-ssop-go:hover{background:#222}
.co-ssop-alt{width:100%;height:44px;margin-top:10px;border:0;border-radius:999px;background:#f4f2ed;font:inherit;font-size:13.5px;font-weight:700;color:#1a1a1a;cursor:pointer}
.co-ssop-n{margin:14px 0 0;font-size:11.5px;color:#9a9893;line-height:1.4}

/* signed in: no continue button; checkout unlocks automatically */
#buyer[data-auth-state=member] [data-guest-continue],#buyer[data-auth-state=member] .co-guest-issues{display:none!important}

#buyer [data-guest-continue]{display:none!important}

/* guest form: more space between pills */
#buyer[data-av] [data-buyer-fields]{row-gap:18px!important}
#buyer [data-buyer-fields] .co-fields.two,#buyer [data-buyer-fields] .co-fields{column-gap:16px!important;row-gap:18px!important}

/* duplicate email/phone notice spacing */
#buyer .co-field{display:flex;flex-direction:column}
#buyer .co-dupe-error{margin:10px 0 2px!important;padding:10px 16px 10px 12px!important;min-height:0!important;border-radius:16px!important;gap:10px!important;align-items:center!important;font-size:13px!important;line-height:1.4}
#buyer .co-dupe-error .de-mark{width:22px!important;height:22px!important;flex:none;font-size:12px!important}
#buyer .co-verify:focus{outline:none}#buyer .co-verify:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}

/* guest: all clear → green success pill (promo-style reveal) */
#buyer .co-guest-issues.is-ok{padding:0!important;background:none!important;border:0!important}
.co-iss-okp{position:relative;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 18px 0 8px;border-radius:999px;background:#1f8a5b;color:#fff;overflow:hidden;clip-path:circle(0 at 26px 50%);animation:issReveal .7s cubic-bezier(.22,1,.36,1) forwards}
.co-iss-okic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:#fff;color:#1f8a5b;transform:scale(0) rotate(-90deg);animation:prPop .55s cubic-bezier(.34,1.56,.64,1) .2s forwards}
.co-iss-okic svg{stroke-dasharray:24;stroke-dashoffset:24;animation:prDraw .4s ease-out .48s forwards}
.co-iss-okt{display:flex;flex-direction:column;opacity:0;transform:translateX(-8px);animation:prIn .45s cubic-bezier(.22,1,.36,1) .32s forwards}
.co-iss-okt b{font-size:13.5px;font-weight:800;line-height:1.25}.co-iss-okt small{font-size:12px;color:rgba(255,255,255,.85);font-weight:600;line-height:1.3}
@keyframes issReveal{to{clip-path:circle(150% at 26px 50%)}}
@media (prefers-reduced-motion:reduce){.co-iss-okp,.co-iss-okic,.co-iss-okic svg,.co-iss-okt{animation:none;clip-path:none;transform:none;opacity:1;stroke-dashoffset:0}}

/* ── Reserve: 10 design options (prototype tabs) ── */

.op-rsv-t>b{display:inline-flex;align-items:center;gap:6px}
.op-rsv-i{position:relative;color:#a8a6a0!important;font-weight:400}.op-rsv-i .gtb2-tip{text-align:start;white-space:normal;cursor:default;width:250px}

/* reserve: hold period */
.op-rsv-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.op-rsv-o{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border:1px solid #e4e2dc;border-radius:14px;background:#fff;font:inherit;text-align:start;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.op-rsv-o b{font-size:13.5px;font-weight:800;color:#1a1a1a}.op-rsv-o small{font-size:11.5px;color:#6b6b6b;font-weight:600}
.op-rsv-o:hover{border-color:#b7b4ad}.op-rsv-o.is-on{border-color:#1a1a1a;box-shadow:0 0 0 1px #1a1a1a}
.op-rsv-o:focus{outline:none}.op-rsv-o:focus-visible{outline:2px solid #1a1a1a;outline-offset:2px}
@media (max-width:420px){.op-rsv-o{padding:9px 10px}.op-rsv-o small{font-size:10.5px}}

.op-rsv-split{display:none!important}
.op-rsv-o{gap:4px;padding:12px 14px}
.op-rsv-o-amt{font-size:18px;font-weight:800;color:#1a1a1a;white-space:nowrap;line-height:1.15}.op-rsv-o-amt .ccy{font-size:11px;font-weight:700;opacity:.65}
.op-rsv-o small{line-height:1.35}

/* reserve options v2 */
.op-rsv-opts{gap:10px!important}
.op-rsv-o{position:relative;gap:0!important;padding:0!important;border-radius:18px!important;overflow:hidden;min-width:0}
.op-rsv-o-h{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px 0;box-sizing:border-box}
.op-rsv-o-hr{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;background:#f4f2ed;font-size:11.5px;font-weight:800;color:#1a1a1a;white-space:nowrap}
.op-rsv-o-rd{width:18px;height:18px;border-radius:50%;border:1.5px solid #c9c5bb;box-sizing:border-box;flex:none;transition:border .15s}
.op-rsv-o-lbl{padding:12px 14px 0;font-size:11.5px;font-weight:600;color:#6b6b6b;white-space:nowrap}
.op-rsv-o-amt{padding:2px 14px 12px;font-size:20px!important;letter-spacing:-.01em}
.op-rsv-o-f{display:flex;flex-direction:column;gap:1px;width:100%;margin-top:auto;padding:9px 14px 11px;box-sizing:border-box;border-top:1px dashed #e4e2dc;background:#fbfaf7}
.op-rsv-o-f span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9a9893}
.op-rsv-o-f b{font-size:12.5px;font-weight:700;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-rsv-o:hover{border-color:#b7b4ad}
.op-rsv-o.is-on{border-color:#1a1a1a!important;box-shadow:0 0 0 1px #1a1a1a!important}
.op-rsv-o.is-on .op-rsv-o-rd{border:5.5px solid #1a1a1a}
.op-rsv-o.is-on .op-rsv-o-hr{background:#1a1a1a;color:#fff}
.op-rsv-o.is-on .op-rsv-o-f{background:#f4f2ed}
@media (max-width:520px){.op-rsv-opts{grid-template-columns:minmax(0,1fr)!important}.op-rsv-o{display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"h h" "l a" "f f";align-items:center}.op-rsv-o-h{grid-area:h}.op-rsv-o-lbl{grid-area:l;padding-bottom:12px}.op-rsv-o-amt{grid-area:a;padding:12px 14px}.op-rsv-o-f{grid-area:f;flex-direction:row;justify-content:space-between;align-items:center}}

.op-rsv-t>small{display:none!important}

/* reserve = payment split toggle above methods */
.op-rsv-wrap{margin-bottom:18px}
.op-rsv-tgl{width:100%;display:flex!important;align-items:center;gap:12px;text-align:start}
.op-rsv-tgl .op-rsv-t{flex:1;min-width:0}
.op-rsv-tgl .op-rsv-amt{display:none!important}
.op-rsv-sw{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:#e4e1d9;transition:background .18s}
.op-rsv-sw i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.op-rsv-tgl.is-on .op-rsv-sw{background:#1a1a1a}.op-rsv-tgl.is-on .op-rsv-sw i{transform:translateX(18px)}
html[dir=rtl] .op-rsv-sw i{left:auto;right:3px}html[dir=rtl] .op-rsv-tgl.is-on .op-rsv-sw i{transform:translateX(-18px)}
.op-rsv-tgl:not(.is-on){background:#fff!important;border-color:#e4e2dc!important;box-shadow:none!important}
.op-rsv-box.is-in{animation:opRsvIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes opRsvIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.op-pay-lbl{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9a9893}
.op-gt-rsv{display:flex;flex-direction:column;gap:2px;margin-top:6px;font-size:12px;color:#6b6b6b;line-height:1.4}.op-gt-rsv:empty{display:none}
.op-gt-rsv span:first-child{display:inline-flex;align-self:flex-start;height:22px;align-items:center;padding:0 9px;margin-bottom:4px;border-radius:999px;background:#1a1a1a;color:#fff;font-size:11px;font-weight:800}
.op-gt-rsv b{color:#1a1a1a;font-weight:700}

#opPayConsumer .op-pay-methods{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important}

.op-pay-pill .op-pay-nm{flex:1;min-width:0}
.op-pay-fee{margin-inline-start:auto;font-size:12px;font-weight:600;color:#6b6b6b;white-space:nowrap}
@media (max-width:520px){.op-pay-pill:has(.op-pay-fee){flex-wrap:wrap}.op-pay-fee{flex-basis:100%;margin-inline-start:32px;white-space:normal}}

.op-pay-pill:has(.op-pay-nm){justify-content:flex-start!important;text-align:start!important}
.op-pay-pill .op-pay-nm{text-align:start!important}

/* confirm & pay: label + final amount */
#opConfirm,#paymentSubmit.op-confirm{display:flex!important;align-items:center;justify-content:space-between!important;gap:14px;min-height:64px;padding:10px 12px 10px 26px!important;text-align:start}
.op-cf-l{display:flex;flex-direction:column;gap:1px;min-width:0}.op-cf-l b{font-size:16px;font-weight:800;line-height:1.2}.op-cf-l small{font-size:12px;font-weight:600;opacity:.8;line-height:1.3}
.op-cf-r{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 18px;border-radius:999px;background:rgba(255,255,255,.16);font-size:18px;font-weight:800;white-space:nowrap;letter-spacing:-.01em}
.op-cf-r small{font-size:11.5px;font-weight:700;opacity:.8}
.op-cf-r svg{margin-inline-start:4px;transition:transform .18s}#opConfirm:hover .op-cf-r svg,#paymentSubmit.op-confirm:hover .op-cf-r svg{transform:translateX(3px)}
html[dir=rtl] .op-cf-r svg{transform:scaleX(-1)}
@media (max-width:420px){#opConfirm,#paymentSubmit.op-confirm{padding-inline-start:20px!important}.op-cf-l small{display:none}.op-cf-r{font-size:16px;padding:0 12px 0 14px}}

.op-pay-fee{display:inline-flex;align-items:center;gap:6px}.op-pay-i{position:relative;color:#a8a6a0!important}.op-pay-i .gtb2-tip{inset-inline-start:auto!important;inset-inline-end:-14px;width:240px;text-align:start;white-space:normal}.op-pay-i .gtb2-tip::after{inset-inline-start:auto!important;inset-inline-end:18px}


/* ==========================================================================
   INLINE <style id="co-login-v2"> — Customer details · Log in / Apple / Google / Guest card
   ========================================================================== */
[data-buyer-card] .co-tabbar{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;height:auto;background:#f4f2ed;border-radius:999px;box-shadow:none;width:100%;max-width:420px;margin:0 auto 22px;align-self:center;box-sizing:border-box}
[data-buyer-card] .co-or span{flex:none;white-space:nowrap;display:inline}
[data-buyer-card] .co-tabpanel[data-auth-panel=login]{width:100%;align-self:center;box-sizing:border-box}
[data-buyer-card] .co-tab{padding:0 16px;white-space:nowrap;height:40px;border-radius:999px;font-size:14px;font-weight:700;box-shadow:none}
[data-buyer-card] .co-tab.is-on{background:#fff;color:#1a1a1a;box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px -6px rgba(0,0,0,.18)}
[data-buyer-card] .co-tabpanel[data-auth-panel=login]{max-width:420px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
[data-buyer-card] .co-lede{margin:0 0 2px;text-align:center;font-size:13.5px;color:#6b6b6b;line-height:1.5}
[data-buyer-card] .co-sso-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
[data-buyer-card] .co-sso-btn{height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid #d4d2cb;border-radius:999px;background:#fff;font-size:14px;font-weight:700;transition:border-color .15s,background .15s}
[data-buyer-card] .co-sso-btn:hover{border-color:#1a1a1a;background:#fbfaf7}
[data-buyer-card] .co-sso-btn .ico{width:18px;height:18px;display:grid;place-items:center}
[data-buyer-card] .co-sso-btn .ico svg{width:15px;height:17px}
[data-buyer-card] .co-or{display:flex;align-items:center;gap:12px;margin:4px 0;font-size:12px;color:#8a8883;text-transform:none}
[data-buyer-card] .co-or::before,[data-buyer-card] .co-or::after{content:"";flex:1;height:1px;background:#e8e6e0}
[data-buyer-card] .co-login-fields{display:flex;flex-direction:column;gap:14px;margin:0}
[data-buyer-card] .co-lf{display:flex;flex-direction:column;gap:6px}
[data-buyer-card] .co-lf-l{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:700;color:#1a1a1a;padding-inline:4px}
[data-buyer-card] .co-forgot{font-size:12.5px;font-weight:600;color:#6b6b6b;text-decoration:none;margin:0}
[data-buyer-card] .co-forgot:hover{color:#d62133}
[data-buyer-card] .co-ctl input{height:46px;border:1px solid #d4d2cb;border-radius:999px;padding:0 18px;font-size:14px}
[data-buyer-card] .co-ctl input:focus{border-color:#1a1a1a;outline:none;box-shadow:0 0 0 3px rgba(26,26,26,.06)}
[data-buyer-card] .co-login-submit{height:48px;margin-top:4px;border-radius:999px;font-size:15px;font-weight:800}
[data-buyer-card] .co-alt{margin:2px 0 0;text-align:center;font-size:13px;color:#6b6b6b}
[data-buyer-card] .co-alt-l{border:0;background:none;padding:0;font:inherit;font-weight:700;color:#1a1a1a;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
[data-buyer-card] .co-alt-l:hover{color:#d62133}
[dir=rtl] [data-buyer-card] .co-sso-btn .ico{order:0}
@media (max-width:480px){[data-buyer-card] .co-sso-list{grid-template-columns:1fr}}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}
.gtb2-c b.is-neg{color:#1f8a5b}.op-gt-save{display:block;margin-top:3px;color:#1f8a5b;font-weight:700}

/* ==========================================================================
   INLINE <style id="op-dt-nav"> — Date & time carousel with arrows and counters
   ========================================================================== */
.op-dt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.op-dt-head .op-dt-sublabel{margin:0}
/* ── THE HEAD KEEPS ITS HEIGHT WHEN THE RAIL NEEDS NO ARROWS ───────────────
   po-rail.js:80 hides the counter and arrows when every chip already fits --
   deliberately, and right. But hiding them collapsed the head from 32px to
   21px, so everything below step 1 rose by 11px as soon as a date with one
   showtime followed a date with ten. MEASURED: step 2's top moved 890 -> 879
   at 1440 and 819 -> 808 at 390. The time rail itself was the larger half of
   the same fault and is fixed above.

   The height is reserved on the HEAD rather than by keeping the nav visible,
   and that choice is deliberate: the nav is hidden by an inline
   [hidden]{display:none !important} on the page AND by an explicit
   .op-dt-nav[hidden] rule in this sheet, so making it hold its space would
   mean an !important fighting both -- to un-hide something two other rules
   are deliberately hiding. A min-height says what is actually wanted, which
   is that the head does not change size when its controls come and go.

   32px is the head's height WITH the nav, measured, not chosen. If the nav
   ever grows the head grows with it, because this is a floor and not a
   height. */
.op-dt-head { min-height: 32px; }
.op-dt-nav{display:flex;align-items:center;gap:6px}.op-dt-nav[hidden]{display:none}
.op-dt-count{font-size:12px;font-weight:700;color:var(--o5-ink2,#6b6b6b);font-variant-numeric:tabular-nums;margin-inline-end:4px}
.op-dt-arr{display:grid;place-items:center;width:32px;height:32px;border:1px solid #d4d2cb;border-radius:50%;background:#fff;color:#1a1a1a;cursor:pointer;transition:border-color .15s,background .15s}
.op-dt-arr:hover:not(:disabled){border-color:#1a1a1a;background:#fbfaf7}.op-dt-arr:disabled{opacity:.35;cursor:default}
[dir=rtl] .op-dt-arr svg{transform:scaleX(-1)}
.op-date-strip{scroll-behavior:smooth;width:100%;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity}
.op-date-strip .op-date-pill{scroll-snap-align:start}
#datetime,#datetime .op-section-card-body,#datetime .op-dt-block,:has(>#datetime){min-width:0;max-width:100%}
#datetime{overflow:hidden}
#datetime .op-time-strip{flex-wrap:nowrap;width:100%;max-width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:4px}#datetime .op-time-strip::-webkit-scrollbar{display:none}#datetime .op-time-pill{flex:none;white-space:nowrap;scroll-snap-align:start}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="op-cart-bd"> — Shopping cart · line breakdown
   ========================================================================== */
.op-cart-card{border-color:#d4d2cb}.op-cart-card .op-cart-cyl-ext{border-top:0;border-bottom:1px solid #d4d2cb}
.op-cart-bd-tg{border-color:#d4d2cb!important}.op-cart-bd-tg:focus{outline:none}.op-cart-bd-tg:focus-visible{outline:2px solid var(--o5-ink);outline-offset:2px}
.op-cart-ev-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-cart-cyl-row2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}.op-cart-cyl-row2 .op-cart-cyl-date{margin:0}
.op-cart-bd-tg{flex:none;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border:1px solid var(--o5-line);border-radius:999px;background:var(--o5-surface);font-family:var(--o5-display);font-size:11.5px;font-weight:700;color:var(--o5-ink2);cursor:pointer;transition:border-color .15s,color .15s}
.op-cart-bd-tg:hover{border-color:var(--o5-ink)!important;color:var(--o5-ink)}.op-cart-bd-tg svg{transition:transform .2s}
.op-cart-card.is-open .op-cart-bd-tg{color:var(--o5-ink);border-color:var(--o5-ink)!important}.op-cart-card.is-open .op-cart-bd-tg svg{transform:rotate(180deg)}
.op-cart-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}.op-cart-card.is-open .op-cart-bd{grid-template-rows:1fr}
.op-cart-bd-in{overflow:hidden;min-height:0}
.op-cart-card.is-open .op-cart-bd-in{margin-top:12px;padding-top:10px;border-top:1px dashed var(--o5-line)}
.op-cart-bd-r{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-family:var(--o5-display);font-size:12.5px;color:var(--o5-ink2)}
.op-cart-bd-r em{font-style:normal;color:var(--o5-ink3,#9a9893);margin-inline-start:4px}.op-cart-bd-r b{font-weight:700;color:var(--o5-ink);white-space:nowrap}
.op-cart-bd-r.is-tot{margin-top:6px;padding-top:8px;border-top:1px solid var(--o5-line);font-weight:700;color:var(--o5-ink)}.op-cart-bd-r.is-tot b{font-weight:800}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="op-cart-bd-btn"> — Shopping cart · breakdown toggle button
   ========================================================================== */
.op-cart-bd-tg{display:flex!important;align-items:center;justify-content:center;width:100%;height:26px!important;margin:0;padding:0!important;border:0!important;border-top:1px solid #e4e2dc!important;border-radius:0!important;background:rgba(255,255,255,.5)!important;color:var(--o5-ink2,#6b6b6b)!important;cursor:pointer;transition:background .15s,color .15s}
.op-cart-bd-tg svg{transition:transform .25s ease}
.op-cart-bd-tg:hover{background:#fff!important;color:var(--o5-ink,#1a1a1a)!important}
.op-cart-card.is-open .op-cart-bd-tg{color:var(--o5-ink,#1a1a1a)!important}
.op-cart-card.is-open .op-cart-bd-tg svg{transform:rotate(180deg)}
.op-cart-card.is-open .op-cart-bd-in{margin-top:12px;padding-top:10px;border-top:1px dashed #d4d2cb}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="op-cart-kind"> — Shopping cart · ticket vs add-on tiles
   ========================================================================== */
.op-cart-kind{margin-inline-start:auto;flex:none;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.op-cart-kind svg{flex:none;color:currentColor!important}
.is-ticket .op-cart-kind{background:#f4f2ed;color:#55534e;box-shadow:inset 0 0 0 1px #e4e2dc}
.is-addon .op-cart-kind{background:#f4f2ed;color:#55534e;box-shadow:inset 0 0 0 1px #e4e2dc}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="op-cart-layout2"> — Shopping cart · layout v2 (event strip, tiles)
   ========================================================================== */
.op-cart-card .op-cart-cyl-ext{padding-inline-end:10px}
.op-cart-cyl-ext .op-cart-cyl-del{margin-inline-start:auto;flex:none;width:28px;height:28px}
.op-cart-cyl-ext .op-cart-cyl-del:hover{background:#f4f2ed}
.op-cart-cyl-row1 .op-cart-cyl-price{margin-inline-start:auto}
.op-cart-cyl-row2 .op-cart-kind{margin-inline-start:auto}
.op-cart-cyl-row1 .op-cart-cyl-name{font-size:15px;letter-spacing:0}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="op-swipe"> — Shopping cart · swipe-left to delete
   ========================================================================== */
#opCartLines .op-cart-card{touch-action:pan-y;user-select:none;-webkit-user-select:none;will-change:transform}
#opCartLines .op-cart-card.is-swiping{transition:none!important;box-shadow:0 10px 28px -14px rgba(0,0,0,.28);cursor:grabbing}
.op-swipe-wrap{position:relative;margin-bottom:12px;border-radius:20px}.op-swipe-wrap:last-child{margin-bottom:0}.op-swipe-wrap>.op-cart-card{position:relative;z-index:1;margin-bottom:0!important}
.op-swipe-under{--p:0;--w:0px;position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:flex-end;padding:0 18px;border-radius:20px;background:color-mix(in oklab,#d62133 calc(var(--p)*100%),#f4e3e5);color:#fff;overflow:hidden}
.op-swipe-under.is-rtl{justify-content:flex-start}
.op-swipe-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--o5-display);font-size:13px;font-weight:700;opacity:calc(var(--p)*1.4 - .2);transform:translateX(calc((1 - var(--p))*24px)) scale(calc(.85 + var(--p)*.15));transition:transform .18s ease}
.op-swipe-under.is-rtl .op-swipe-pill{transform:translateX(calc((var(--p) - 1)*24px)) scale(calc(.85 + var(--p)*.15))}
.op-swipe-pill svg{transition:transform .35s cubic-bezier(.34,1.8,.5,1)}
.op-swipe-under.is-armed .op-swipe-pill svg{transform:scale(1.18) rotate(-8deg)}
.op-swipe-under.is-go .op-swipe-pill{transform:translateX(-6px) scale(1.04);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){#opCartLines .op-cart-card,.op-swipe-wrap,.op-swipe-pill{transition:none!important}}
.op-gt-shell{margin:24px 0 18px;filter:drop-shadow(0 0 .6px rgba(0,0,0,.3)) drop-shadow(0 12px 16px rgba(0,0,0,.06))}
.op-gt-wrap{--cut:84px;position:relative;border-radius:20px;background:#f4f2ed;overflow:hidden;-webkit-mask:radial-gradient(circle 10px at 0 var(--cut),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% var(--cut),#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 10px at 0 var(--cut),#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 10px at 100% var(--cut),#0000 98%,#000) right/51% 100% no-repeat}
.op-gt-top{padding:22px 22px 22px}
.op-gt-wrap .op-grand-total{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;padding:0!important;border:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;min-height:0!important}
.op-gt-wrap .op-grand-total-lbl{display:flex;flex-direction:column;gap:4px;min-width:0}
.op-gt-wrap .op-grand-total-lbl b{font-size:16px;font-weight:800;letter-spacing:-.01em;text-transform:none;color:#1a1a1a}
.op-gt-shell{filter:drop-shadow(0 0 .8px rgba(214,33,51,.75)) drop-shadow(0 12px 16px rgba(214,33,51,.10))!important}
.op-gt-wrap{background:#fff6f5!important}
.op-gt-tg,.op-gt-bd{background:#fffafa!important}.op-gt-tg:hover{background:#fff!important}
.op-gt-perf{border-top-color:#f0c2c7!important}
.op-gt-wrap .op-gt-big{color:#d62133!important}
.op-gt-tg{color:#b91c2c!important}
.op-gt-r1{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.op-gt-sub{font-size:12px;font-weight:500;color:#8a8883;white-space:nowrap}
.op-gt-wrap .op-gt-big{flex:none;display:flex;align-items:baseline;gap:5px;color:#1a1a1a;font-size:28px;font-weight:800;letter-spacing:-.025em;line-height:1}
.op-gt-wrap .op-gt-big .ccy{font-size:12px;font-weight:800;color:#d62133;letter-spacing:.04em}
.op-gt-perf{height:0;margin:0 16px;border-top:1.5px dashed #cfccc4}
.op-gt-bd{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease;background:#fbfaf7}.op-gt-wrap.is-open .op-gt-bd{grid-template-rows:1fr}
.op-gt-bd-in{overflow:hidden;min-height:0;padding:0 22px}.op-gt-wrap.is-open .op-gt-bd-in{padding:14px 22px 6px}
.op-gt-tg{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:44px;padding:0 22px;border:0;background:#fbfaf7;font-family:var(--o5-display);font-size:12.5px;font-weight:600;color:#55534e;cursor:pointer;transition:color .15s,background .15s}
.op-gt-tg svg{width:14px;height:14px;padding:0;background:none;color:currentColor;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.op-gt-tg:hover{color:#1a1a1a;background:#fff}
.op-gt-wrap.is-open .op-gt-tg{color:#1a1a1a}.op-gt-wrap.is-open .op-gt-tg svg{transform:rotate(180deg)}
.op-gt-tg:focus{outline:none}.op-gt-tg:focus-visible .op-gt-tg-l{outline:2px solid #1a1a1a;outline-offset:3px;border-radius:4px}
.op-gt-wrap.is-empty .op-gt-tg,.op-gt-wrap.is-empty .op-gt-bd,.op-gt-wrap.is-empty .op-gt-perf{display:none}.op-gt-wrap.is-empty{-webkit-mask:none;mask:none}
.op-flash{animation:opFlash 1.1s ease}@keyframes opFlash{0%{box-shadow:0 0 0 0 rgba(214,33,51,.0)}25%{box-shadow:0 0 0 4px rgba(214,33,51,.18)}100%{box-shadow:0 0 0 0 rgba(214,33,51,0)}}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="cart-variants"> — Shopping cart · variants
   ========================================================================== */
.cv-bar{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;padding:10px;border-radius:16px;background:#1a1a1a;color:#fff}
.cv-bar-t{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:0 4px}
.cv-bar-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.cv-bar-tabs button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);cursor:pointer;font-family:var(--o5-display);transition:background .15s,color .15s}
.cv-bar-tabs button b{font-size:13px;font-weight:800}.cv-bar-tabs button span{font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cv-bar-tabs button:hover{background:rgba(255,255,255,.14);color:#fff}
.cv-bar-tabs button.is-on{background:#fff;color:#1a1a1a}.cv-bar-tabs button.is-on b{color:#d62133}
#opCartLines .op-cart-card{transition:background .2s,border-color .2s,box-shadow .2s}
/* 2 Minimal */
#opCartLines[data-cv="2"] .op-cart-card{background:#fff;border-color:#ecebe6}
#opCartLines[data-cv="2"] .op-cart-cyl-ext{background:#fff;border-bottom:0;padding-bottom:0;font-weight:600;color:#8a8883}
#opCartLines[data-cv="2"] .op-cart-cyl{padding-top:6px}
#opCartLines[data-cv="2"] .op-cart-bd-tg{background:#fff!important;border-top-color:#f1f0ec!important}
/* 3 Dark header */
#opCartLines[data-cv="3"] .op-cart-cyl-ext{background:#1a1a1a;color:#fff;border-bottom-color:#1a1a1a}
#opCartLines[data-cv="3"] .op-cart-cyl-ext svg{color:rgba(255,255,255,.6)!important}#opCartLines[data-cv="3"] .op-cart-cyl-ext .op-cart-cyl-del{color:rgba(255,255,255,.7)}#opCartLines[data-cv="3"] .op-cart-cyl-ext .op-cart-cyl-del:hover{background:rgba(255,255,255,.12);color:#fff}
#opCartLines[data-cv="3"] .op-cart-card{border-color:#1a1a1a}
/* 4 Compact */
#opCartLines[data-cv="4"] .op-cart-card{border-radius:14px;margin-bottom:8px}
#opCartLines[data-cv="4"] .op-cart-cyl-ext{padding:7px 10px 7px 14px;font-size:11.5px}
#opCartLines[data-cv="4"] .op-cart-cyl{padding:10px 14px 10px}
#opCartLines[data-cv="4"] .op-cart-cyl-row1 .op-cart-cyl-name,#opCartLines[data-cv="4"] .op-cart-cyl-price{font-size:14px}
#opCartLines[data-cv="4"] .op-cart-cyl-date{font-size:12px}#opCartLines[data-cv="4"] .op-cart-kind{height:20px;font-size:10.5px}
#opCartLines[data-cv="4"] .op-cart-bd-tg{height:20px!important}
/* 5 Ticket stub */
#opCartLines[data-cv="5"] .op-cart-card{border:0;background:#f4f2ed;-webkit-mask:radial-gradient(circle 8px at 0 44px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 44px,#0000 98%,#000) right/51% 100% no-repeat;mask:radial-gradient(circle 8px at 0 44px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 8px at 100% 44px,#0000 98%,#000) right/51% 100% no-repeat}
#opCartLines[data-cv="5"] .op-cart-cyl-ext{height:44px;padding-block:0;background:#fff;border-bottom:1.5px dashed #cfccc4}
#opCartLines[data-cv="5"] .op-cart-bd-tg{border-top:1.5px dashed #e0ddd5!important}
/* 6 Elevated */
#opCartLines[data-cv="6"] .op-cart-card{background:#fff;border-color:transparent;border-radius:22px;box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 24px -14px rgba(0,0,0,.22)}
#opCartLines[data-cv="6"] .op-cart-cyl-ext{background:#fff;border-bottom-color:#f1f0ec}
#opCartLines[data-cv="6"] .op-cart-bd-tg{background:#faf9f6!important;border-top-color:#f1f0ec!important}
/* 7 Silver */
#opCartLines[data-cv="7"] .op-cart-card{background:#fff;border-color:#d4d2cb}
#opCartLines[data-cv="7"] .op-cart-cyl-ext{background:#ecebe6;border-bottom-color:#d4d2cb}
#opCartLines[data-cv="7"] .op-cart-bd-tg{background:#f7f6f3!important}
/* 8 Bold outline */
#opCartLines[data-cv="8"] .op-cart-card{border:1.5px solid #1a1a1a;background:#fff}
#opCartLines[data-cv="8"] .op-cart-cyl-ext{background:#f4f2ed;border-bottom:1.5px solid #1a1a1a;color:#1a1a1a}
#opCartLines[data-cv="8"] .op-cart-bd-tg{border-top:1.5px solid #1a1a1a!important;background:#fff!important;color:#1a1a1a!important}
/* 9 Midnight */
#opCartLines[data-cv="9"] .op-cart-card{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
#opCartLines[data-cv="9"] .op-cart-cyl-ext{background:#242424;border-bottom-color:#2e2e2e;color:rgba(255,255,255,.8)}
#opCartLines[data-cv="9"] .op-cart-cyl-ext svg{color:rgba(255,255,255,.5)!important}#opCartLines[data-cv="9"] .op-cart-cyl-del{color:rgba(255,255,255,.6)}#opCartLines[data-cv="9"] .op-cart-cyl-del:hover{background:rgba(255,255,255,.1)!important;color:#fff}
#opCartLines[data-cv="9"] .op-cart-cyl-name,#opCartLines[data-cv="9"] .op-cart-cyl-price{color:#fff}#opCartLines[data-cv="9"] .op-cart-cyl-unit,#opCartLines[data-cv="9"] .op-cart-cyl-price .ccy,#opCartLines[data-cv="9"] .op-cart-cyl-date{color:rgba(255,255,255,.6)}
#opCartLines[data-cv="9"] .op-cart-kind{background:rgba(255,255,255,.1)!important;color:#fff!important;box-shadow:none!important}
#opCartLines[data-cv="9"] .op-cart-bd-tg{background:#242424!important;border-top-color:#2e2e2e!important;color:rgba(255,255,255,.7)!important}
#opCartLines[data-cv="9"] .op-cart-bd-r{color:rgba(255,255,255,.65)}#opCartLines[data-cv="9"] .op-cart-bd-r b{color:#fff}#opCartLines[data-cv="9"] .op-cart-bd-in{border-top-color:#333!important}#opCartLines[data-cv="9"] .op-cart-bd-r.is-tot{border-top-color:#333;color:#fff}
/* 10 Floating tag */
#opCartLines[data-cv="10"] .op-cart-card{background:#fff;border-color:#e4e2dc}
#opCartLines[data-cv="10"] .op-cart-cyl-ext{background:none;border-bottom:0;padding:14px 10px 0 16px}
#opCartLines[data-cv="10"] .op-cart-cyl-ext>svg{display:none}
#opCartLines[data-cv="10"] .op-cart-ev-n{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:#f4f2ed;font-size:11.5px;font-weight:700;color:#55534e}
#opCartLines[data-cv="10"] .op-cart-cyl{padding-top:10px}
#opCartLines[data-cv="10"] .op-cart-bd-tg{background:#faf9f6!important;border-top-color:#f1f0ec!important}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="op-cols"> — Page columns (main + sticky cart)
   ========================================================================== */
.st-wrap{max-width:1280px;padding-inline:var(--o5-edge)}@media (min-width:1101px){.st-main{grid-template-columns:minmax(0,1fr) 440px!important;gap:56px!important}}@media (max-width:1100px){.st-main{grid-template-columns:minmax(0,1fr)!important}.st-main-r{position:static}}.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="gt-variants"> — Grand total · variants
   ========================================================================== */
.gv-bar{display:flex;flex-direction:column;gap:8px;margin:22px 0 0;padding:10px;border-radius:16px;background:#1a1a1a;color:#fff}
.gv-bar-t{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:0 4px}
.gv-bar-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.gv-bar-tabs button{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);cursor:pointer;font-family:var(--o5-display)}
.gv-bar-tabs button b{font-size:13px;font-weight:800}.gv-bar-tabs button span{font-size:9.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gv-bar-tabs button:hover{background:rgba(255,255,255,.14);color:#fff}.gv-bar-tabs button.is-on{background:#fff;color:#1a1a1a}.gv-bar-tabs button.is-on b{color:#d62133}
.gv-bar+.op-gt-shell{margin-top:14px}
.op-gt-shell[data-gv="2"]{filter:none!important}
.op-gt-shell[data-gv="2"] .op-gt-wrap{-webkit-mask:none!important;mask:none!important}
.op-gt-shell[data-gv="2"] .op-gt-wrap{background:#fff!important;border:1px solid #e4e2dc;border-radius:20px}
.op-gt-shell[data-gv="2"] .op-gt-perf{display:none}
.op-gt-shell[data-gv="2"] .op-gt-tg{background:#faf9f6!important;border-top:1px solid #f1f0ec!important;color:#55534e!important;border-radius:0 0 19px 19px}
.op-gt-shell[data-gv="2"] .op-gt-bd{background:#faf9f6!important}
.op-gt-shell[data-gv="2"] .op-gt-tg:hover{background:#fff!important;color:#1a1a1a!important}
.op-gt-shell[data-gv="3"]{filter:none!important}
.op-gt-shell[data-gv="3"] .op-gt-wrap{-webkit-mask:none!important;mask:none!important}
.op-gt-shell[data-gv="3"] .op-gt-wrap{background:#fff!important;border:1px solid #e4e2dc;border-radius:20px}
.op-gt-shell[data-gv="3"] .op-grand-total-lbl b{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:#f4f2ed;font-size:11.5px!important;font-weight:700!important;color:#55534e!important}
.op-gt-shell[data-gv="3"] .op-gt-big{color:#1a1a1a!important;font-size:30px!important}
.op-gt-shell[data-gv="3"] .op-gt-big .ccy{color:#d62133!important}
.op-gt-shell[data-gv="3"] .op-gt-perf{display:none}
.op-gt-shell[data-gv="3"] .op-gt-tg{background:#faf9f6!important;border-top:1px solid #f1f0ec!important;color:#55534e!important;border-radius:0 0 19px 19px}
.op-gt-shell[data-gv="3"] .op-gt-bd{background:#faf9f6!important}
.op-gt-shell[data-gv="4"]{filter:drop-shadow(0 12px 18px rgba(214,33,51,.28))!important}
.op-gt-shell[data-gv="4"] .op-gt-wrap{background:#d62133!important}
.op-gt-shell[data-gv="4"] .op-grand-total-lbl b,.op-gt-shell[data-gv="4"] .op-gt-big,.op-gt-shell[data-gv="4"] .op-gt-big .ccy{color:#fff!important}
.op-gt-shell[data-gv="4"] .op-gt-big .ccy{opacity:.8}
.op-gt-shell[data-gv="4"] .op-gt-sub{color:rgba(255,255,255,.75)}
.op-gt-shell[data-gv="4"] .op-gt-perf{border-top-color:rgba(255,255,255,.35)!important}
.op-gt-shell[data-gv="4"] .op-gt-tg,.op-gt-shell[data-gv="4"] .op-gt-bd{background:#c41d2e!important;color:#fff!important}
.op-gt-shell[data-gv="4"] .op-gt-tg:hover{background:#b91c2c!important}
.op-gt-shell[data-gv="4"] .op-cart-bd-r{color:rgba(255,255,255,.8)}.op-cart-bd-r b{color:#fff}.op-cart-bd-r.is-tot{border-top-color:rgba(255,255,255,.25);color:#fff}
.op-gt-shell[data-gv="5"]{filter:drop-shadow(0 12px 18px rgba(0,0,0,.25))!important}
.op-gt-shell[data-gv="5"] .op-gt-wrap{background:#1a1a1a!important}
.op-gt-shell[data-gv="5"] .op-grand-total-lbl b,.op-gt-shell[data-gv="5"] .op-gt-big{color:#fff!important}
.op-gt-shell[data-gv="5"] .op-gt-big .ccy{color:#ff5a68!important}
.op-gt-shell[data-gv="5"] .op-gt-sub{color:rgba(255,255,255,.55)}
.op-gt-shell[data-gv="5"] .op-gt-perf{border-top-color:rgba(255,255,255,.2)!important}
.op-gt-shell[data-gv="5"] .op-gt-tg,.op-gt-shell[data-gv="5"] .op-gt-bd{background:#242424!important;color:rgba(255,255,255,.8)!important}
.op-gt-shell[data-gv="5"] .op-gt-tg:hover{background:#2c2c2c!important;color:#fff!important}
.op-gt-shell[data-gv="5"] .op-cart-bd-r{color:rgba(255,255,255,.65)}.op-cart-bd-r b{color:#fff}.op-cart-bd-r.is-tot{border-top-color:#333;color:#fff}
.op-gt-shell[data-gv="6"]{filter:none!important}
.op-gt-shell[data-gv="6"] .op-gt-wrap{-webkit-mask:none!important;mask:none!important}
.op-gt-shell[data-gv="6"] .op-gt-wrap{background:#f4f2ed!important;border:1px solid #e4e2dc;border-radius:20px}
.op-gt-shell[data-gv="6"] .op-gt-big{color:#1a1a1a!important}.op-gt-big .ccy{color:#d62133!important}
.op-gt-shell[data-gv="6"] .op-gt-perf{border-top-color:#d4d2cb!important}
.op-gt-shell[data-gv="6"] .op-gt-tg,.op-gt-shell[data-gv="6"] .op-gt-bd{background:transparent!important;color:#55534e!important}
.op-gt-shell[data-gv="6"] .op-gt-tg:hover{color:#1a1a1a!important;background:rgba(255,255,255,.5)!important}
.op-gt-shell[data-gv="7"]{filter:none!important}
.op-gt-shell[data-gv="7"] .op-gt-wrap{-webkit-mask:none!important;mask:none!important}
.op-gt-shell[data-gv="7"] .op-gt-wrap{background:#fff!important;border:1.5px solid #d62133;border-radius:20px}
.op-gt-shell[data-gv="7"] .op-gt-perf{border-top-color:#f3c9cd!important}
.op-gt-shell[data-gv="7"] .op-gt-tg,.op-gt-shell[data-gv="7"] .op-gt-bd{background:#fff!important;color:#b91c2c!important}
.op-gt-shell[data-gv="7"] .op-gt-tg:hover{background:#fff6f5!important}
.op-gt-shell[data-gv="8"]{filter:none!important}
.op-gt-shell[data-gv="8"] .op-gt-wrap{-webkit-mask:none!important;mask:none!important}
.op-gt-shell[data-gv="8"] .op-gt-wrap{background:#fff!important;border:1px solid #e4e2dc;border-radius:20px;overflow:hidden}
.op-gt-shell[data-gv="8"] .op-gt-big{color:#1a1a1a!important}.op-gt-big .ccy{color:#d62133!important}
.op-gt-shell[data-gv="8"] .op-gt-perf{display:none}
.op-gt-shell[data-gv="8"] .op-gt-bd{background:#fff6f5!important}
.op-gt-shell[data-gv="8"] .op-gt-tg{background:#d62133!important;color:#fff!important;border-radius:0}
.op-gt-shell[data-gv="8"] .op-gt-tg:hover{background:#b91c2c!important}
.op-gt-shell[data-gv="9"]{filter:none!important}
.op-gt-shell[data-gv="9"] .op-gt-wrap{-webkit-mask:none!important;mask:none!important}
.op-gt-shell[data-gv="9"] .op-gt-wrap{background:transparent!important;border-top:1.5px solid #1a1a1a;border-bottom:1px solid #e4e2dc;border-radius:0}
.op-gt-shell[data-gv="9"] .op-gt-top{padding-inline:2px!important}
.op-gt-shell[data-gv="9"] .op-gt-perf{display:none}
.op-gt-shell[data-gv="9"] .op-gt-tg{justify-content:flex-start!important;padding-inline:2px!important;background:transparent!important;color:#1a1a1a!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#d4d2cb}
.op-gt-shell[data-gv="9"] .op-gt-bd{background:transparent!important}.op-gt-bd-in{padding-inline:2px!important}
.op-gt-shell[data-gv="10"]{filter:drop-shadow(0 1px 1px rgba(0,0,0,.05)) drop-shadow(0 12px 18px rgba(0,0,0,.08))!important}
.op-gt-shell[data-gv="10"] .op-gt-wrap{-webkit-mask:none!important;mask:none!important}
.op-gt-shell[data-gv="10"] .op-gt-wrap{background:#fff!important;border-radius:22px}
.op-gt-shell[data-gv="10"] .op-grand-total-lbl b{display:inline-flex;align-items:center;height:24px;padding:0 11px;border-radius:999px;background:#fff6f5;box-shadow:inset 0 0 0 1px #f3c9cd;font-size:11.5px!important;font-weight:700!important;color:#b91c2c!important}
.op-gt-shell[data-gv="10"] .op-gt-perf{border-top-color:#ecebe6!important}
.op-gt-shell[data-gv="10"] .op-gt-tg,.op-gt-shell[data-gv="10"] .op-gt-bd{background:#faf9f6!important;color:#55534e!important}
.op-gt-shell[data-gv="10"] .op-gt-tg{border-radius:0 0 22px 22px}.op-gt-tg:hover{color:#1a1a1a!important;background:#f4f2ed!important}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="gt-bd2"> — Grand total · breakdown v2 (bar, groups, tooltips)
   ========================================================================== */
.op-gt-shell[data-gv="8"] .op-gt-bd{background:#fff!important}
.op-gt-shell[data-gv="8"] .op-gt-bd-in{padding:0 20px!important;border:0!important;margin:0!important;background:none!important;box-shadow:none!important}
.op-gt-shell[data-gv="8"] .op-gt-wrap.is-open .op-gt-bd-in{padding:4px 20px 16px!important;border-top:1px solid #ecebe6!important}
.gtb-g{padding:12px 0 10px;border-bottom:1px dashed #e4e2dc}
.gtb-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-family:var(--o5-display)}
.gtb-h span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a8883}
.gtb-h b{font-size:12.5px;font-weight:700;color:#1a1a1a}
.gtb-r{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0 3px 10px;font-family:var(--o5-display);font-size:13px;color:#6b6b6b}
.gtb-r b{font-weight:600;color:#55534e;font-variant-numeric:tabular-nums}
[dir=rtl] .gtb-r{padding:3px 10px 3px 0}
.gtb-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding:12px 14px;border-radius:14px;background:#fff6f5;font-family:var(--o5-display)}
.gtb-tot span{font-size:13.5px;font-weight:700;color:#1a1a1a}
.gtb-tot b{display:flex;align-items:baseline;gap:4px;font-size:17px;font-weight:800;color:#d62133}.gtb-tot small{font-size:11px;font-weight:700}
.gtb2-bar{display:flex;gap:3px;height:8px;margin:16px 0 6px;border-radius:999px;overflow:hidden}
.gtb2-bar span{flex-basis:0;min-width:6px;border-radius:999px}
.gtb2-bar .is-o,.gtb2-h i.is-o{background:#1a1a1a}.gtb2-bar .is-f,.gtb2-h i.is-f{background:#d62133}.gtb2-bar .is-x,.gtb2-h i.is-x{background:#c9c7c0}
.gtb2-g{padding:12px 0;border-bottom:1px solid #f1f0ec}
.gtb2-h{display:flex;align-items:center;gap:8px;font-family:var(--o5-display)}
.gtb2-h i{width:8px;height:8px;border-radius:50%;flex:none}
.gtb2-h span{font-size:13.5px;font-weight:700;color:#1a1a1a}
.gtb2-h em{font-style:normal;font-size:11px;font-weight:700;color:#8a8883;padding:2px 7px;border-radius:999px;background:#f4f2ed}
.gtb2-h b{margin-inline-start:auto;font-size:13.5px;font-weight:700;color:#1a1a1a;font-variant-numeric:tabular-nums}
.gtb2-s{display:flex;flex-direction:column;margin:8px 0 0 3px;padding-inline-start:13px;border-inline-start:1.5px solid #ecebe6}
.gtb2-c{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;font-family:var(--o5-display)}
.gtb2-c span{font-size:12.5px;font-weight:500;color:#8a8883}
.gtb2-c b{font-size:12.5px;font-weight:600;color:#55534e;font-variant-numeric:tabular-nums}
.op-gt-shell[data-gv="8"] .op-gt-tg:focus-visible .op-gt-tg-l{outline:2px solid #fff!important;outline-offset:3px}
.gtb2-c>span{display:inline-flex;align-items:center;gap:5px}
.gtb2-i{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:none;color:#a8a6a0;cursor:help}
.gtb2-i:hover,.gtb2-i:focus-visible{color:#1a1a1a;outline:none}
.gtb2-tip{position:absolute;z-index:50;bottom:calc(100% + 10px);inset-inline-start:-14px;display:flex;flex-direction:column;gap:3px;width:230px;padding:11px 14px 12px;border-radius:14px;background:#fff;border:1px solid #e4e2dc;box-shadow:0 14px 30px -12px rgba(0,0,0,.22);text-align:start;white-space:normal;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s}
.gtb2-tip::after{content:"";position:absolute;top:100%;inset-inline-start:18px;width:10px;height:10px;margin-top:-5px;background:#fff;border-right:1px solid #e4e2dc;border-bottom:1px solid #e4e2dc;transform:rotate(45deg)}
.gtb2-tip b{font-size:12.5px!important;font-weight:800!important;color:#1a1a1a!important}
.gtb2-tip em{font-style:normal;font-size:12.5px!important;font-weight:500!important;line-height:1.45;color:#3d3d3a!important}
.gtb2-i:hover .gtb2-tip,.gtb2-i:focus .gtb2-tip{opacity:1;visibility:visible;transform:translateY(0)}
.op-gt-bd-in{overflow:visible}.op-gt-wrap:not(.is-open) .op-gt-bd-in{overflow:hidden}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   INLINE <style id="txc"> — Payment · Tix Coins (wallet panel, Use it, applied state)
   ========================================================================== */
.op-pay-pill.op-pay-txc.is-on{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-bottom-color:#e4e2dc!important;box-shadow:0 0 0 1px #1a1a1a inset!important}
.op-txc-bal{display:inline-flex;align-items:center;gap:6px;color:#1a1a1a!important;font-weight:700!important}
.op-txc-coin{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a3,#e9b23a 60%,#c98a1c);color:#6b4500;font-size:11px;font-weight:800;box-shadow:inset 0 0 0 1.5px rgba(107,69,0,.25);flex:none}
.op-txc{margin-top:-11px;padding:18px 20px 18px;border:1px solid #1a1a1a;border-top:0;border-radius:0 0 18px 18px;background:#f7f5f0;display:flex;flex-direction:column;gap:14px;box-shadow:0 0 0 1px #1a1a1a inset;clip-path:inset(0 -2px -2px -2px);animation:opTierIn .22s ease-out}
.op-txc[hidden]{display:none}
.op-txc-w{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#1a1a1a;color:#fff}
.op-txc-w .op-txc-coin{width:40px;height:40px;font-size:18px}
.op-txc-w>div{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.op-txc-w small{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#b9b7b0}
.op-txc-w b{font-size:22px;font-weight:800;letter-spacing:-.01em}.op-txc-w b em{font-style:normal;font-size:13px;font-weight:600;color:#cfccc4;margin-inline-start:6px}
.op-txc-w>span{font-size:12px;color:#cfccc4;text-align:end;white-space:nowrap}
.op-txc-bar{height:8px;border-radius:999px;background:#e6e4de;display:flex;overflow:hidden}.op-txc-bar i{display:block;height:100%;background:linear-gradient(90deg,#e9b23a,#c98a1c)}.op-txc-bar u{display:block;height:100%;background:#1a1a1a;text-decoration:none}
.op-txc-leg{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;font-weight:600;color:#55534e;margin-top:-6px}.op-txc-leg span{white-space:nowrap;flex:none;width:auto!important;display:inline-flex;align-items:center;gap:6px}.op-txc-leg i{width:9px;height:9px;border-radius:50%;display:block}
.op-txc-rows{display:flex;flex-direction:column;border-radius:14px;background:#fff;border:1px solid #ecebe6;padding:4px 14px}
.op-txc-rows>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;font-size:13.5px;color:#55534e;border-top:1px solid #f1f0ec}.op-txc-rows>div:first-child{border-top:0}
.op-txc-rows b{color:#1a1a1a;white-space:nowrap}.op-txc-rows .gold b{color:#9a6a00}.op-txc-rows .due{font-size:15px;font-weight:800;color:#1a1a1a}.op-txc-rows .due b{font-size:17px}
.op-txc-n{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.5}
.op-txc-n.ok{background:#eef8f2;color:#145c3c}.op-txc-n.part{background:#fff4e0;color:#6b4100}
.op-txc-n svg{flex:none;margin-top:2px}
.op-txc-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.op-txc-use{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px 0 12px;border:0;border-radius:999px;background:#1a1a1a;color:#fff;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;transition:transform .15s}.op-txc-use:hover{transform:translateY(-1px)}.op-txc-use .op-txc-coin{width:26px;height:26px;font-size:12px}
.op-pay-pill.op-pay-txc.is-applied{background:#fbf6e9!important;border-color:#e8d8ad!important;box-shadow:none!important;cursor:default}.op-pay-txc.is-applied .radio{border-color:#c98a1c!important;background:#c98a1c}.op-pay-txc.is-applied .radio::after{content:'';position:absolute;inset:4px;background:#fff;border-radius:50%}
.op-txc-rm{margin-inline-start:12px;font-size:12.5px;font-weight:700;color:#d62133;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.op-pay-pill.op-pay-off{opacity:.42;pointer-events:auto;cursor:not-allowed}
.op-txc-full{display:flex;gap:10px;align-items:flex-start;margin:6px 0 22px;padding:12px 16px;border-radius:14px;background:#fff4e0;color:#6b4100;font-size:13px;line-height:1.5}.op-txc-full.ok{background:#eef8f2;color:#145c3c}.op-txc-full[hidden]{display:none}#opTxcFull:not([hidden])~.op-secure-note{display:none}.op-txc-full svg{flex:none;margin-top:2px}
.op-txc-gt .gtb2-h{display:flex;align-items:center;gap:8px}.op-txc-gt .gtb2-h .op-txc-coin{width:18px;height:18px;font-size:10px}.op-txc-gt b.is-neg{color:#9a6a00}
.op-txc-demo{margin-inline-start:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:#9a9893}
.op-txc-demo button{white-space:nowrap;height:26px;padding:0 10px;border-radius:999px;border:1px solid #d4d2cb;background:#fff;font:inherit;font-size:11.5px;font-weight:700;color:#55534e;cursor:pointer}.op-txc-demo button.on{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.o5[data-theme=dark] .op-txc{background:#141414;border-color:#fff}

/* ==========================================================================
   INLINE <style id="inline">
   ========================================================================== */
.op-mode{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding:16px 20px;border:1px solid #E3E1DC;border-radius:20px;background:#fff}.op-mode-t{display:grid;gap:3px;min-width:0}.op-mode-t b{font-size:16px;font-weight:700;color:#1a1a1a}.op-mode-t span{font-size:13px;color:#6b6b6b}.op-mode-sw{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:600;color:#1a1a1a;cursor:pointer}.op-mode-tr{position:relative;width:48px;height:28px;border-radius:999px;background:#d4d2cb;transition:background .2s;flex:none}.op-mode-tr::after{content:'';position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}.op-mode-sw[aria-checked="true"] .op-mode-tr{background:#C8323A}.op-mode-sw[aria-checked="true"] .op-mode-tr::after{transform:translateX(20px)}.op-mode-sw:focus-visible{outline:2px solid #1a1a1a;outline-offset:4px;border-radius:8px}.op-limit{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 12px 10px 10px;border-radius:999px;background:#fff4e5;border:1px solid #f3d3a4;color:#7a4a0c;font-size:13.5px;line-height:1.35}
.op-limit-ic{flex:none;width:28px;height:28px;border-radius:50%;background:#f59e0b;color:#fff;display:flex;align-items:center;justify-content:center}
.op-limit-t{flex:1;min-width:0;text-wrap:pretty}.op-limit-t b{font-weight:800;color:#5c3608}
.op-limit-n{flex:none;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid #f3d3a4;font-weight:800;font-size:12px;font-variant-numeric:tabular-nums}
.op-limit.is-full{background:#fdecec;border-color:#f3b4b4;color:#8a1c1c}.op-limit.is-full .op-limit-ic{background:#e11d2a}.op-limit.is-full .op-limit-t b{color:#6d1010}.op-limit.is-full .op-limit-n{border-color:#f3b4b4}
.op-limit.is-shake{animation:opLimShake .4s}@keyframes opLimShake{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.gtb2-rate,.op-cart-bd-r .gtb2-rate{display:inline-flex;align-items:center;height:18px;margin-inline-start:6px;padding:0 7px;border-radius:999px;background:rgba(26,26,26,.035);border:1px dashed rgba(26,26,26,.18);color:#6b6963;font-style:normal;font-size:10.5px;font-weight:600;line-height:1;vertical-align:1px}

/* ==========================================================================
   AUTOFILL RESET (project rule: inputs never show browser autofill highlight)
   ========================================================================== */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px transparent inset!important;box-shadow:0 0 0 1000px transparent inset!important;-webkit-text-fill-color:inherit!important;caret-color:inherit;transition:background-color 99999s ease-out 0s!important}
input::-webkit-contacts-auto-fill-button,input::-webkit-credentials-auto-fill-button{visibility:hidden;display:none!important;pointer-events:none}

/* ═══════════════════════════════════════════════════════════════════════════
   THE 24 RULES WHERE THE OLD SHEET IS MORE SPECIFIC THAN THIS ONE.

   purchase-o5.css loads first, so this file wins every collision at equal
   weight -- 148 of the 172 real ones. These are the rest: selectors where the
   old sheet is MORE specific and would therefore keep winning despite loading
   earlier. Each is restated here at the old rule's own weight, carrying the
   value THIS design asks for, so the outcome is written down rather than left
   to a specificity race nobody would think to check.

   Generated from a measured comparison of the two sheets, not hand-listed.
   Most of these target step 4 and step 5 markup that window 12 is replacing;
   when that lands they will match nothing, and commit (2) removes them with
   the rest of the pruning.
   ═══════════════════════════════════════════════════════════════════════════ */

/* old weight (1, 1, 0) */
#buyer .op-section-card-head {
  border-radius: var(--o5-r) var(--o5-r) 0 0;
}

/* old weight (0, 2, 1) */
.co-ctl input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset!important;
  -webkit-text-fill-color: inherit!important;
  box-shadow: 0 0 0 1000px transparent inset!important;
  caret-color: inherit;
  transition: background-color 99999s ease-out 0s!important;
}

/* old weight (0, 3, 1) */
.co-ctl input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px transparent inset!important;
  -webkit-text-fill-color: inherit!important;
  box-shadow: 0 0 0 1000px transparent inset!important;
  caret-color: inherit;
  transition: background-color 99999s ease-out 0s!important;
}

/* old weight (0, 3, 1) */
.co-ctl input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px transparent inset!important;
  -webkit-text-fill-color: inherit!important;
  box-shadow: 0 0 0 1000px transparent inset!important;
  caret-color: inherit;
  transition: background-color 99999s ease-out 0s!important;
}

/* old weight (0, 2, 0) */
.op-admin-foot .op-confirm {
  border-radius: 999px;
}

/* old weight (0, 2, 0) */
.op-admin-foot .op-confirm-amt {
  border-left: 1px solid rgba(255,255,255,.4);
  font-weight: 800;
}

/* old weight (0, 2, 0) */
.op-admin-pay .op-admin-pill {
  display: flex;
}

/* old weight (0, 3, 1) */
.op-admin-pay > li.active > .op-admin-pill {
  background: var(--o5-surface);
  color: var(--o5-ink);
}

/* old weight (0, 2, 0) */
.op-cart-rail .title h2 {
  color: var(--o5-ink);
  font-family: var(--o5-display);
  font-size: 19px!important;
  font-weight: 800;
}

/* old weight (0, 2, 0) */
.op-grand-total .op-grand-total-amt {
  color: #d62133;
  font-family: var(--o5-display);
  font-size: 18px;
  font-weight: 800;
  white-space: nowrap;
}

/* A HIDDEN PILL DRAWS NOTHING. step5-checkout.js hides the Apple Pay pill on
   a device that cannot pay with it and the PayPal pill when no PayPal
   redirect is on the page -- by the hidden attribute, which .op-pay-pill's
   display:flex beat, so both were still drawn (e3's audit, 2026-10-14).
   Stated here for this control rather than left to a global [hidden] rule. */
.op-pay-pill[hidden] {
  display: none;
}

/* ONE PAYMENT CONTROL AT A TIME. step5-checkout.js shows the selected
   method's slot and hides the rest by the hidden attribute, and
   .op-pay-foot's display:flex (purchase-o5.css) beat the browser's own
   [hidden] rule -- so a small Apple Pay button was drawn under Cards
   (live, 2026-10-13). purchase-step5-check measures the drawn boxes. */
.op-pay-foot[hidden] {
  display: none;
}

/* Apple Pay in Confirm's place, the size of the payment-method pills
   (Mac, 2026-10-13: "same as the other payment pills"): the pill's row
   width, its 58px drawn height and its 18px radius. The SDK draws from the
   --apple-pay-button-* variables in purchase.html; these size the host.
   purchase-step5-check compares it with the pill's own box. */
.op-pay-foot-applepay > div {
  flex: 1;
  display: flex;
}
.op-pay-foot-applepay apple-pay-button {
  display: block;
  width: 100%;
  height: 58px;
  border-radius: 18px;
}

/* old weight (0, 2, 0) */
.op-pay-foot .op-confirm {
  border-radius: 999px;
}

/* old weight (0, 2, 0) */
.op-pay-foot .op-confirm-amt {
  border-left: 1px solid rgba(255,255,255,.4);
  font-weight: 800;
}

/* old weight (0, 2, 0) */
.op-pay-methods .op-pay-pill {
  padding: 14px 16px!important;
}

/* old weight (0, 2, 1) */
.op-pay-methods > li > .op-pay-pill {
  flex: 1;
}

/* old weight (0, 3, 1) */
.op-pay-methods > li.active > .op-pay-pill {
  background: var(--o5-surface);
}

/* old weight (0, 5, 1) */
.op-pay-methods > li.active > .op-pay-pill .radio::after {
  background: #d62133;
  border-radius: 50%;
  content: '';
  inset: 3px;
  position: absolute;
}

/* old weight (0, 3, 0) */
.op-row.is-sold .op-row-desc {
  color: var(--o5-ink2);
}

/* old weight (0, 4, 0) */
.op-row.is-sold .op-row-price .num {
  color: var(--o5-ink);
}

/* old weight (0, 8, 1) */
.purchase-page .order-info .order-summary .summary-box .info-box .basket-performance .ticket-item .ticket-inner > div {
  padding: 10px 0;
}

/* old weight (0, 3, 0) */
.purchase-page .sec-title h1 .op-step-num {
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  height: 26px;
  width: 26px;
}

/* old weight (0, 3, 0) */
.purchase-page .select-performance h1 .op-step-num {
  border-radius: 50%;
  display: inline-flex;
  flex: none;
  height: 26px;
  width: 26px;
}

/* old weight (0, 3, 1) */
.st-summary .ticket-inner.st-summary-line-row > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px 0;
}

/* old weight (0, 2, 1) */
.st-summary-sections .ticket-inner > div {
  display: flex;
  font-size: 13.5px;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
}

/* old weight (0, 2, 0) */
.st-tier .st-tier-body {
  padding: 10px 24px 14px;
}


/* ── THE CAP BAR'S TEXT FOLLOWS ITS GREY (ruled 2026-10-12) ──────────────────
   The bar wears .op-limit now, so the design's grey background applies. Its
   TEXT did not follow: purchase-o5.css sets .op-cap-text and .op-cap-count to
   the amber inks, at a weight the design's `.op-limit` rules do not reach --
   they target `.op-limit-t` and `[class*="count"]`, which our markup spells
   differently. Amber words on a grey bar is neither look.

   Written here rather than in the carry-over because it belongs to the design
   the bar is being moved TO, and it goes when purchase-o5.css is pruned in
   commit (2) and the amber rules go with it. */
.op-cap.op-limit .op-cap-text { color: #3d3d3a; }
.op-cap.op-limit .op-cap-text b,
.op-cap.op-limit .op-cap-text strong { color: #1a1a1a; }
.op-cap.op-limit .op-cap-count { background: #fff; border-color: #e4e1d9; color: #1a1a1a; }
.op-cap.op-limit .op-cap-ico { background: #1a1a1a; color: #fff; }


/* ── THE TIMER IS ONE ROW (ruled 2026-10-12: "clean and visible") ───────────
   IT HAD TO OUTRANK themes/light/css/purchase.css, which carries
   `.purchase-page #countdown .remaining-time{display:inline-block}` at (1,2,0)
   AND loads eighteenth, after both purchase sheets -- so the design's plain
   `.op-timer{display:flex}` at (0,1,0) lost twice over, and the bar stacked
   its icon, its number and its "Why?" onto three rows. Measured: icon top 305,
   number 339, why 376.

   The selector below is that rule plus the design's own class, (1,3,0), which
   is the smallest thing that wins. An !important would also have worked and
   says less about why. */
.purchase-page #countdown .remaining-time.op-timer { display: flex; align-items: center; }

/* ── THE 32px UNDER THE TIMER, WHICH A PLUGIN WAS SWALLOWING ───────────────
   Mac, on production, 2026-10-13: the cart card's top touches the timer's
   bottom right and the mode card sits flush under it. "There must be a
   space."

   The design's gap is 32px, and it is NOT missing from our sheet: .op-timer
   above carries the design's own `margin-bottom:32px`, byte for byte.
   MEASURED in the design's own page, served and shot at 1440, 1280, 1024 and
   390: the gap from the timer to .st-main is 32px at every one. Ours was 0.

   The margin is swallowed at RUNTIME. mainApp/purchase.js:894 calls
   `$("#countdown").sticky(...)`, and jquery.sticky wraps #countdown in a
   .sticky-wrapper whose height it sets to `stickyElement.outerHeight()` --
   which EXCLUDES margins. The wrapper therefore reserves the bar's 44px and
   nothing else, and because that height is explicit the child's margin cannot
   collapse through it either. Nothing is wrong with the CSS; the element it
   applies to stopped being the one in the flow.

   THE GAP GOES ON THE WRAPPER, and the reason is in the plugin's scroll
   handler: it re-runs `stickyWrapper.css('height', ...)` on EVERY scroll
   event, so anything expressed as the wrapper's height is overwritten the
   first time the page moves. It never touches margin.

   Scoped to this page: the only other .sticky() call is global.js on #navbar,
   and the purchase page renders no #navbar -- checked, it is not in the
   render. .op-timer keeps its own margin as the fallback for the case where
   the plugin has not run, when there is no wrapper and the design's rule
   applies directly; the two can never both take effect. */
.purchase-page .sticky-wrapper { margin-bottom: 32px; }

   The design lays this bar out with `.op-timer a{margin-left:auto}`, which
   pushes "Why?" to the far end. OUR "Why?" is a <span>, not an <a> -- it
   carries a tooltip rather than a destination -- so that rule never applied
   and the link wrapped onto a second row, at 390 and at 1440.

   Left as a span deliberately: turning it into an anchor to match a selector
   would give it an href that goes nowhere and a click that jumps the page,
   which is a behaviour change to satisfy a stylesheet. The margin is the
   thing the design actually wants, so the margin is what is restated.

   margin-inline-start, not margin-left, so it pushes to the correct end under
   right-to-left as well. */
.op-timer .toggle-why { margin-inline-start: auto; }

/* The body must not wrap either -- the design keeps the number and its
   sentence on one line beside the icon. */
.op-timer .op-timer-body { flex-wrap: nowrap; }
.op-timer { flex-wrap: nowrap; }


/* ── THE QUANTITY IS AN <input>, NOT A <span> ──────────────────────────────
   The design styles `.stv-pill .val` as a span it writes into. Ours is
   `<input name="ticketQuantity" class="val">`, because seat-selection.js reads
   and writes it as a form control and the add-to-basket post carries its
   value. Swapping it for a span to match a selector would break the thing the
   page is for, so the input is made to LOOK like the design's span instead.

   -moz-appearance/appearance and the webkit spinner rules remove the number
   input's stepper arrows, which the design has no room for and which would
   sit on top of the "+" control. */
.op-tier-list .stv-pill .val,
.op-tier-list .val[name="ticketQuantity"] {
  border: 0; background: transparent; padding: 0;
  width: 2.2ch; text-align: center; font: inherit; color: inherit;
  -moz-appearance: textfield; appearance: textfield;
}
.op-tier-list .val[name="ticketQuantity"]::-webkit-outer-spin-button,
.op-tier-list .val[name="ticketQuantity"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}


/* ── THE KEYBOARD RING ON STEP 2'S CONTROLS (regression caught by the check) ─
   Bootstrap gives every .btn `outline:5px auto -webkit-focus-ring-color` on
   :focus, which fires on a MOUSE CLICK as well as a Tab -- that is the browser
   blue Mac rejected on the stepper once already (477a57de1). The rule that
   fixed it named the OLD step-2 controls; the design's cards are new elements,
   so it stopped reaching them and the blue came back. purchase-step2-check
   caught it: "the keyboard ring is browser blue rgb(0, 95, 204)", eight times.

   Same treatment as the date and time pills and the rail arrows: nothing on a
   pointer press, the 2px ink ring for a keyboard user. The design sheet has no
   focus rule of its own for these, so this is an addition rather than a
   translation of one. */
.op-tier-list .op-qty-plus:focus,
.op-tier-list .op-qty-minus:focus,
.op-tier-list .op-tcv:focus,
.op-tier-list .val[name="ticketQuantity"]:focus {
  outline: none !important;
  box-shadow: none !important;
}
.op-tier-list .op-qty-plus:focus-visible,
.op-tier-list .op-qty-minus:focus-visible,
.op-tier-list .op-tcv:focus-visible,
.op-tier-list .val[name="ticketQuantity"]:focus-visible {
  outline: 2px solid var(--o5-ink) !important;
  outline-offset: 2px !important;
}


/* ── THE CART LINE'S BREAKDOWN IS CLOSED UNTIL ITS CHEVRON IS PRESSED ───────
   The design draws the panel open because its own JS builds it that way; on
   this page the five figures are rendered by the server and were always
   visible. Collapsed by default, revealed by .is-open, and the chevron turns
   with it.

   max-height rather than display:none so the panel can animate and so a
   screen reader is not handed a block that appears from nowhere; the hidden
   state is also aria-expanded="false" on the control, which is what actually
   announces it. */
.op-cart-card { position: relative; }
.op-cart-card .op-cart-bd { max-height: 0; overflow: hidden; transition: max-height .18s ease; }
.op-cart-card .op-cart-bd.is-open { max-height: 60em; }
.op-cart-bd-tgl {
  position: absolute; inset-inline-end: 10px; bottom: 6px;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--o5-ink2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .18s ease, color .15s;
}
.op-cart-card.is-bd-open .op-cart-bd-tgl { transform: rotate(180deg); color: var(--o5-ink); }
.op-cart-bd-tgl:focus { outline: none !important; box-shadow: none !important; }
.op-cart-bd-tgl:focus-visible { outline: 2px solid var(--o5-ink) !important; outline-offset: 2px !important; }
.op-cart-cyl-row1 { display: flex; align-items: baseline; gap: 8px; }
.op-cart-cyl-row1 .op-cart-cyl-price { margin-inline-start: auto; }
.op-cart-cyl-row2 { display: flex; align-items: center; gap: 8px; }
.op-cart-cyl-row2 .op-cart-kind { margin-inline-start: auto; }
.op-cart-cyl-ext { display: flex; align-items: center; gap: 8px; }
.op-cart-cyl-ext .op-cart-cyl-del { margin-inline-start: auto; }


/* ── APPLY SITS INSIDE THE PROMO FIELD ──────────────────────────────────────
   The design's own promo is .op-promo[data-pv="2"] (the variant its live page
   carries): ONE 52px pill -- .op-promo-field, flex row, 4px padding, 1px
   #d4d2cb, radius 999px -- holding the input as a flex:1 box and the black
   .op-promo-apply inside it at 42px. Values below are that block's, verbatim.

   Mapped onto the legacy markup rather than re-parented in the template,
   because seat-selection.js:2180 REGENERATES this exact form when the basket
   goes empty -> non-empty: a markup-only fix reverts on the first add. The
   legacy structure maps one-for-one -- .promo-form is the pill,
   .code-input-col the box, .code-btn-col the button's holder.

   A FLEX CHILD, NOT AN ABSOLUTE ONE. My first attempt positioned
   .code-btn-col absolutely and it rendered at the START of the field, on top
   of the placeholder. Two reasons, and the second is the one worth keeping:
   purchase-o5.css carries `.st-summary .promo-form .code-btn-col` at (0,3,0)
   and my rule was `.op-cart-rail .code-btn-col` at (0,2,0) -- so it never
   applied at all, whatever it said. LOADING LATER DOES NOT BEAT BEING MORE
   SPECIFIC. Every selector here matches the specificity of the o5 rule it
   replaces, and carries !important only where the o5 rule does.

   Flex also mirrors under right-to-left for free, which the transform-based
   version would not have. */
.op-cart-rail .promo-form,
.st-summary .promo-form {
  display: flex; flex-direction: row; align-items: center; gap: 0;
  height: 52px; padding: 4px;
  border: 1px solid #d4d2cb; border-radius: 999px;
  background: var(--o5-surface); transition: border-color .15s;
}
.op-cart-rail .promo-form:focus-within,
.st-summary .promo-form:focus-within { border-color: var(--o5-ink); }
.op-cart-rail .promo-form .code-input-col,
.st-summary .promo-form .code-input-col {
  flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0;
}
.op-cart-rail .promo-form .form-group,
.st-summary .promo-form .form-group {
  height: 100%; margin: 0; display: flex; align-items: center;
}
/* The field's border and pill are on .promo-form now, so the input carries
   none of its own. padding-inline, not padding-left/right: the design's
   `padding:0 10px 0 14px` is start-14 end-10, which must swap in Arabic.

   `.uk-form` IS IN THESE SELECTORS ON PURPOSE. themes/light/css/purchase.css
   -- which loads 19th, after this sheet -- carries
   `.purchase-page .uk-form input[type="text"] { border:1px solid lightgrey
   !important }`. That looks less specific than a three-class selector and is
   not: AN ATTRIBUTE SELECTOR COUNTS AT CLASS LEVEL, so it is (0,3,1), exactly
   what `.op-cart-rail .promo-form input.promo-code` is -- and on a tie the
   later sheet wins. The input kept a square grey border inside the pill, and
   !important on my side could not change it. One more class makes it (0,4,1)
   and the tie is gone. Verified by enumerating the matching rules in the
   browser rather than by counting them in my head, which is what got it wrong. */
.op-cart-rail .uk-form.promo-form input.promo-code,
.st-summary .uk-form.promo-form input.promo-code {
  width: 100%; height: 100%;
  padding: 0; padding-inline: 8px 10px;
  border: 0 !important; border-radius: 0 !important;
  background: none; box-shadow: none !important; height: 100% !important;
}
.op-cart-rail .uk-form.promo-form input.promo-code:focus,
.st-summary .uk-form.promo-form input.promo-code:focus { border-color: transparent !important; }
.op-cart-rail .promo-form .code-btn-col,
.st-summary .promo-form .code-btn-col {
  flex: none; width: auto; padding: 0; float: none;
}
.op-cart-rail .promo-apply,
.st-summary .promo-apply {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: 42px !important; min-height: 0;
  padding: 0 22px !important;
  background: var(--o5-ink) !important; color: #fff !important;
  border: 0 !important; border-radius: 999px !important; box-shadow: none !important;
  font-family: var(--o5-display); font-size: 13.5px; font-weight: 800;
  white-space: nowrap;
}
.op-cart-rail .promo-apply:hover,
.st-summary .promo-apply:hover { background: #333 !important; }
.op-cart-rail .promo-apply:focus,
.st-summary .promo-apply:focus { outline: none !important; box-shadow: none !important; }
.op-cart-rail .promo-apply:focus-visible,
.st-summary .promo-apply:focus-visible { outline: 2px solid var(--o5-ink) !important; outline-offset: 2px !important; }
:root {
  --op-promo-tag: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z"/><path d="M7.5 7.5h.01"/></svg>');
}
/* THE FIELD'S ICON. The design's .op-promo-ic is a TAG at the inline start,
   in --o5-ink3; the legacy markup carries a wand there instead, and the two
   copies of it do not even agree -- the template says fa-wand-magic-sparkles
   and seat-selection.js:2184 writes fa-magic, so whichever one you fix, the
   other appears on the first add. The glyph is therefore set HERE, where both
   copies pass through it. Flex order puts it before the input without
   re-parenting.

   It is the DESIGN'S OWN SVG, carried as a mask rather than as a Font Awesome
   glyph: fa-tag exists in the 6.4.2 sheet this page loads, but only as the
   SOLID tag, and the design draws a 1.8px outline -- Free has no outline tag.
   A mask keeps the colour in CSS (it paints with background-color), so the
   icon still follows --o5-ink3 and still mirrors with the rest of the row. */
.op-cart-rail .promo-form .input-icon,
.st-summary .promo-form .input-icon {
  order: -1; flex: none; display: inline-flex; align-items: center;
  position: static; margin: 0; padding-inline-start: 14px;
  width: 15px; height: 15px; font-size: 0;
  background-color: var(--o5-ink3);
  -webkit-mask: var(--op-promo-tag) center / 15px 15px no-repeat;
  mask: var(--op-promo-tag) center / 15px 15px no-repeat;
}
.op-cart-rail .promo-form .input-icon::before,
.st-summary .promo-form .input-icon::before { content: none; }
/* The icon holds the field's inline-start padding, so the input takes the
   design's 8px gap instead of the full 14. NOT written as `.input-icon +
   input.promo-code`: in the DOM the input comes FIRST and the icon after it,
   and only `order` moves the icon in front -- a sibling combinator reads the
   source, not the rendered order, so that selector matches nothing. */

/* ── THE GRAND TOTAL, AS THE DESIGN DRAWS IT ───────────────────────────────
   Every rule for this card is ALREADY in this sheet, generated from the
   design: .op-gt-shell/-wrap/-top/-r1/-sub/-perf/-tg, and the data-gv="8"
   variant the design's own page carries. I had hand-written my own .op-gt-sub
   and a .op-gt-bd button here before reading the design's markup, and
   .op-gt-bd is the design's name for the breakdown PANEL -- `display:grid;
   grid-template-rows:0fr` -- so my button was a zero-height grid. It is gone;
   the design's names are used instead.

   What is left here is only what the design's own page does not need: the
   wiring classes .info-box.tickets-total, which seat-selection.js anchors the
   promo insert on, carry purchase-o5.css's flex/border/background for the
   old total box. Turned off on the shell, by cascade order, no !important. */
.op-gt-shell.info-box.tickets-total {
  display: block; align-items: initial; justify-content: initial;
  padding: 0; border: 0; background: none; border-radius: 0;
}
/* NO margin-top reset here. The design's own card keeps the 14px that
   .op-grand-total carries -- its .op-gt-wrap rule overrides padding, border
   and background and deliberately not the margin -- and that 14px is 13 of
   the 14 pixels my card was shorter than the design's. Measured, not read. */
/* The design's card sits on a 1.3 line box; this page's base is taller, which
   left the label 32px high against the design's 21, and the sub-line and the
   bar's label each ~9px too tall. One declaration on the wrap, measured
   against the design rather than guessed. */
.op-gt-wrap { line-height: 1.3; }
/* .op-grand-total .op-grand-total-amt later in this sheet sets 18px at the
   same (0,2,0) as the design's `.op-gt-wrap .op-gt-big`, so it won on order
   and the total rendered at 18px instead of 28px. Scoped past both. */
.op-gt-wrap .op-grand-total .op-gt-big { font-size: 28px; line-height: 1; }
/* THE NUMBER IS BLACK AND ONLY THE CURRENCY IS RED, which is what data-gv="8"
   draws. The design's own `.op-gt-big{color:#1a1a1a!important}` could not do
   it here: the figure lives in a child span, and purchase-o5.css colours THAT
   child directly (`.info-box.tickets-total .basket-tickets-total .price-span`),
   so an !important on the parent never reaches it -- a child's own declaration
   beats an inherited one however important the parent's is.

   The o5 rule is `.st-summary .info-box.tickets-total .basket-tickets-total
   .price-span`, which is SIX classes, (0,5,0) -- `.info-box.tickets-total` is
   two of them on one element. My first attempt was three classes and lost;
   loading later is no help against higher specificity. Counted, not estimated,
   the second time. Caught by LOOKING at the picture: every box measurement was
   identical with the number in the wrong colour. */
.op-gt-shell.tickets-total .op-gt-wrap .op-grand-total .op-gt-big .price-span,
.op-gt-shell.tickets-total .op-gt-wrap .op-grand-total .op-gt-big .price { color: #1a1a1a; }
.op-gt-shell.tickets-total .op-gt-wrap .op-grand-total .op-gt-big .ccy,
.op-gt-shell.tickets-total .op-gt-wrap .op-grand-total .op-gt-big .price-currency { color: #d62133; }
.op-gt-wrap .op-gt-big .second-currency { font-size: 12px; font-weight: 700; color: var(--o5-ink2); }

/* ── WINDOW 12'S FINDINGS, MEASURED HERE BEFORE FIXING ──────────────────────

   [1] THE APPLE/GOOGLE BUTTONS OVERLAPPED. Measured at 1440, guest scope:
   each button's box is 154px wide and its three children lay at 93..359 --
   the icon 56px to the LEFT of the button's own left edge and the chip 56px
   past its right, over the next button.

   The cause is worth writing down because the numbers look impossible at
   first. `#buyer .co-sso-list` is a grid of fixed fractions and
   `#buyer .co-sso-btn` is `white-space:nowrap` with `justify-content:center`.
   The content -- icon 20 + label 122 + the "Coming soon" chip 104 + two 10px
   gaps = 266 -- cannot fit in a 154px column, and a CENTRED flex line that is
   wider than its container overflows BY HALF AT EACH END. So the button looks
   as if its children have escaped it; they have, symmetrically.

   THE CHIP IS OURS, NOT THE DESIGN'S. The design has no "Coming soon" on
   these buttons -- it draws working sign-in. We carry one because Apple and
   Google sign-in are on addendum section C's unwired list, so the button must
   say why it does nothing. That is the right call and it makes each button
   ~104px wider than the design's, which the design's column count never
   anticipated. Sizing the columns to the content we actually have is
   therefore the fix, not shrinking our own explanation away.

   auto-fit, so the row keeps its own counsel as the width changes: two
   columns while 190px each fits, one when it does not (at 390 the available
   width is ~332, so one). The label truncates rather than the chip, because
   "Apple"/"Google" is recoverable from the icon and "Coming soon" is the
   entire point of a disabled button. */
#buyer .co-sso-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
#buyer .co-sso-btn { min-width: 0; }
#buyer .co-sso-btn > span:not(.ico):not(.co-soon) {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
#buyer .co-sso-btn > .ico, #buyer .co-sso-btn > .co-soon { flex: none; }

/* [2] THE MEMBER PILL RAN 18px PAST THE VIEWPORT AT 390. Measured: the pill
   379 wide from x=29, its Change button ending at 400 against a 390 viewport,
   inside a .co-fields that is 332.

   MY FIRST FIX DID NOTHING AND THE REASON IS THE WHOLE POINT. I put
   `max-width:100%` on the pill and `min-width:0` on its text, and the pill
   stayed 379. `.co-fields` is `display:grid` with NO grid-template-columns,
   so it has one IMPLICIT column, and an implicit column is sized `auto` --
   which is max-content when something inside refuses to shrink. The column
   was therefore 379 while the grid box was 332, and `max-width:100%` on the
   pill resolved against its 379px TRACK, not against the grid's own width.
   A percentage is only as good as what it is a percentage OF.

   So the track is what has to be told it may shrink. minmax(0,1fr) does that,
   and `min-width:0` on the pill lets the pill itself give way -- a grid item,
   like a flex item, defaults to min-width:auto and will not go below its
   content. The content here ends in a person's name, which has no bound.

   .co-fields.two already carries minmax(0,1fr) in this sheet, for the same
   reason, which is the clue I should have followed before writing the first
   attempt. */
.co-fields { grid-template-columns: minmax(0, 1fr); }
.mb-pill { min-width: 0; max-width: 100%; }
.mb-pill .mb-line { min-width: 0; }
.mb-pill > :last-child { flex: none; }

/* ── WINDOW 0'S THREE STEP-1 DELTAS, MEASURED AGAINST THE DESIGN ────────────

   [1] THE DATE PILLS WERE 2px TALL (78 against the design's 76), and the two
   small lines are where it comes from: .dow and .mon measure 20px high here
   against the design's 12, at the same 10px font. Same cause as the grand
   total's -- this page's base line-height is taller than the design's, and a
   10px label on a ~2.0 line box is 20px whatever its font-size says. The
   design's 12/10 is 1.2.

   The pill is still 78 against the design's 75.84 after that fix, and I could
   not account for the last 2.16px, so it is reported rather than papered over:
   children (12 + 21.84 + 12), gaps (2+2), padding (12+12) and border (1+1) are
   IDENTICAL in both and sum to 75.84; the extra sits split evenly above and
   below the content, and `align-items:flex-start` on the strip does not remove
   it, so it is not the strip stretching them. One real markup difference is
   left: the design's pills are <button>, ours are <a>. I did not chase it
   further because the sheet is mine and the element is not.

   [2] THE TIME STRIP SITTING LOW IS THE SAME 2px, NOT 8. Measured: the time
   block's margin-top is 24px in both, the strip is 646x48 in both, and the
   first pill is 44 high in both -- the only vertical difference above it is
   the date pill. So this fix moves it, and there is nothing else to move. I
   am reporting the number I measured rather than the number in the finding;
   if window 0 measured 8px somewhere else on the page, the measurement above
   says it is not between the card top and the time strip.

   [3] THE CLOCK ICON renders 13x13 against the design's 14x14, from identical
   markup (both say width="14" height="14"), so something here is sizing it.
   Pinned to the design's size explicitly. Its COLOUR is identical in both --
   rgb(26,26,26), stroke-width 1px, opacity 1 -- so "too light" is not a
   colour difference at this size; a 14px glyph drawn into 13px is thinner,
   which is the likeliest reading and is what this fixes. */
.op-date-pill .dow, .op-date-pill .mon { line-height: 1.2; }
.op-time-pill svg { width: 14px; height: 14px; flex: none; }

/* ── THE BOX-OFFICE MODE CARD, TO THE DESIGN ────────────────────────────────
   Values from the design's .op-mode / .op-mode-t / .op-mode-sw / .op-mode-tr,
   verbatim. purchase-o5.css's .po-modecard block is what this replaces; it is
   left in place for commit (2) to remove, so a miss here shows as a visible
   difference rather than as nothing at all.

   THE ON TRACK IS #d62133, NOT THE DESIGN'S LITERAL, AND MAC RULED IT.
   The design paints this one track #C8323A -- a value that appears EXACTLY
   ONCE in its stylesheet, against 76 uses of #d62133, which is the design's
   own --pr-red token and every other red on this page. It was built as
   #C8323A first, because Rule 0 says build what the design says rather than
   improve it, and reported; Mac ruled it a slip on 2026-10-13 and chose the
   token. Written down because the design file still says the other thing, and
   the next person to diff them deserves to know this was asked. */
.po-modecard {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 16px 20px;
  border: 1px solid #E3E1DC; border-radius: 20px; background: #fff;
}
.po-modecard-text { display: grid; gap: 3px; min-width: 0; }
/* line-height:normal is the design's, and it is 4px of card height. Bootstrap
   gives this page 1.4285, which made the title 23px against the design's 21
   and the subtitle 19 against 16 -- the card came out 78 tall against 74 with
   every other value already identical. Measured in both, not guessed. */
.po-modecard-title { margin: 0; font-size: 16px; font-weight: 700; line-height: normal; color: #1a1a1a; }
.po-modecard-sub { margin: 0; font-size: 13px; line-height: normal; color: #6b6b6b; }

/* The control is the whole thing the design makes pressable: the words and
   the track, on one line. */
.po-modecard-control { display: flex; align-items: center; flex: 0 0 auto; }
.po-modeswitch {
  display: flex; align-items: center; gap: 10px;
  border: 0; background: none; padding: 0;
  font: inherit; font-size: 13px; font-weight: 600; color: #1a1a1a;
  cursor: pointer; text-decoration: none;
  /* .po-modeswitch USED TO BE THE TRACK, and purchase-o5.css still sizes it
     as one: width 46, height 26, radius 13. Same selector, so this sheet only
     wins the properties it NAMES -- and omitting these three left the control
     squeezed to 46x26 with the label and the track overflowing it. Restated
     here rather than left to commit (2)'s prune, because this branch has to be
     right on its own. */
  width: auto; height: auto; min-height: 0; border-radius: 0;
}
.po-modecard-label { font-size: 13px; font-weight: 600; color: #1a1a1a; white-space: nowrap; }
.po-modeswitch-track {
  position: relative; flex: none;
  width: 48px; height: 28px; border-radius: 999px;
  background: #d4d2cb; transition: background .2s;
}
/* A REAL ELEMENT WHERE THE DESIGN USES ::after, and deliberately: the knob's
   position IS the state, tools/mode-card-check measures its box, and a
   pseudo-element has no box to measure. Same size, same inset, same travel. */
.po-modeswitch-knob {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .2s;
}
/* THE CONTROL CARRIES NO FILL IN ANY STATE -- the pill is the track.
   purchase-o5.css still has `.po-modeswitch.is-on{background:#d62133}` from
   when .po-modeswitch WAS the track, and that is two classes against this
   sheet's one, so it won: the ON card painted the label and the track as one
   red block with square corners. The 274 assertions stayed green, because
   every one of them reads the track. Only looking at the picture caught it,
   and there is now an assertion for it. */
.po-modeswitch.is-on { background: none; border-color: transparent; }
.po-modeswitch.is-on .po-modeswitch-track { background: #d62133; }
.po-modeswitch.is-on .po-modeswitch-knob { transform: translateX(20px); }
/* THE TRAVEL IS A TRANSFORM, so it is the one thing logical properties do not
   mirror; the inset above flips by itself and this does not. */
[dir="rtl"] .po-modeswitch.is-on .po-modeswitch-knob { transform: translateX(-20px); }
.po-modeswitch:focus { outline: none; }
.po-modeswitch:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 4px; border-radius: 8px; }

/* Refused: the customer state with the control dead. The design draws no such
   state, so these are this build's own, kept to the design's palette. */
/* Same leftover, second state: purchase-o5.css also fills
   `.po-modeswitch.is-disabled`, which is the refused card. The new assertion
   found this one on its first run, in a state I had not thought to shoot. */
.po-modeswitch.is-disabled { cursor: not-allowed; background: none; border-color: transparent; }
.po-modeswitch.is-disabled .po-modeswitch-track { background: #E3E1DC; }
.po-modeswitch.is-disabled .po-modeswitch-knob { background: #f6f5f3; box-shadow: none; }
.po-modecard.is-refused .po-modecard-label { color: #9a968f; }
.po-modecard.is-refused .po-modecard-sub { color: #d62133; }

@media (max-width: 520px) {
  .po-modecard { gap: 10px; padding: 14px 16px; }
}

/* STEP 5's EMPTY-BASKET LINE IS PLAIN TEXT (ruling of 2026-10-13, Rule 0):
   the design draws it unstyled -- its error-box rules are scoped to #buyer --
   while option5.css styles every co-dupe-error as a pink pill. Scoped to
   step 5's issue lines, the customer's and the box office's, so step 4's
   error boxes are unchanged. Values measured from the design page.
   (Window 11; 9b may move it into its own section.) */
#checkout .op-pay-issue.co-dupe-error { padding: 0; min-height: 0; border-radius: 0; background: none; gap: 0;
  margin: 14px 0 0; font-size: 16px; font-weight: 400; line-height: normal; color: #1a1a1a; }
#checkout .op-pay-issue.co-dupe-error.is-on { display: block; }
#checkout .op-pay-issue.co-dupe-error .de-line { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }

/* ── ROUND 3: THREE ITEMS FROM WINDOW 11'S SIDE-BY-SIDES ────────────────────

   [1] THE CONFIRM BUTTON is handled above, by adding #paymentSubmit to the
   design's #opConfirm rules rather than copying them. The design's id exists
   only in the design; ours is #paymentSubmit, and the markup already carries
   its .op-cf-l and .op-cf-r children, so the rule was all that was missing --
   the label and the amount pill were sitting centred together instead of
   pushed to the two ends. Scoped with .op-confirm so it cannot reach the
   box-office button, which has a different inside.

   [2] THE SIGN-IN ROW IS FOUR ACROSS. Measured on buyer-guest-sso-en: my
   auto-fit minmax(190px) gave three columns in a 646px list, so Guest wrapped
   to a second row even with Apple and Google switched ON -- which is
   production's state. Four equal columns is the design, and window 11
   measured them at 154px each with no label clipped.

   The auto-fit is kept for the chip state only. "Coming soon" makes each
   button ~104px wider, which is what made them overlap in the first place;
   that state is never seen on production, so it is the one allowed to wrap.
   If a browser does not support :has(), it gets the four-column default and
   the chip state may clip -- the right way round. */
#buyer .co-sso-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
#buyer .co-sso-list:has(.co-soon) { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }
@media (max-width: 640px) {
  #buyer .co-sso-list,
  #buyer .co-sso-list:has(.co-soon) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
  #buyer .co-sso-list,
  #buyer .co-sso-list:has(.co-soon) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* [3] A DISABLED CONFIRM IS GREY ALL THE WAY ACROSS. purchase-o5.css paints
   .op-admin-foot .op-confirm-amt #d62133, which is right on the red button and
   wrong the moment the button greys -- on an empty basket the box office
   showed a grey button with a pink segment still on it. The disabled segment
   takes the translucent white the DESIGN uses for the customer Confirm's
   amount pill, so it follows the button's colour in every state instead of
   naming one. Both spellings, because the disabled state arrives as the
   property from script and as the class from the render. */
.op-admin-foot .op-confirm:disabled .op-confirm-amt,
.op-admin-foot .op-confirm.is-disabled .op-confirm-amt,
.op-pay-foot .op-confirm:disabled .op-confirm-amt,
.op-pay-foot .op-confirm.is-disabled .op-confirm-amt {
  background: rgba(255, 255, 255, .16);
}

/* ── THE PAGE TITLE AND ITS VENUE, CITY LINE ────────────────────────────────
   The design sets neither line-height, so both run on `normal`; this page
   inherits computed ones and the two drift in OPPOSITE directions -- the
   heading came out 40px against the design's 45 (its 36px type on a 1.1 line
   box), and the venue line 30 against 19 (15px type on a 2.0 one). The header
   measured 120 against 114 with every other value already matching, which is
   the kind of difference that reads as padding and is not.

   Third time on this page: the grand total's label and sub, the mode card's
   title and subtitle, and now this. Measured in both, never guessed. */
.st-header h1 { line-height: normal; }
.st-header .st-sub { line-height: normal; }

/* ── THE BOX-OFFICE METHOD CARDS ARE BUTTONS INSIDE A .uk-form ──────────────
   themes/light/css/uikit.css carries

       .uk-form button { height: 45px !important; }

   and the box-office panel is <form class="form uk-form op-admin-form">, so
   every one of the design's five method cards was pinned to 45px. The design
   draws them 111 tall: a 34px icon, the name, and a line of description. The
   children stacked correctly and simply overflowed the box, which is why the
   icon measured 34 wide and 18 high and why "Complimentary" appeared to spill.

   HOW LONG THIS TOOK IS THE POINT. The card's markup and every rule for it in
   this sheet are byte-identical to the design's -- I diffed them rule by rule
   and then property by property, 23 of 26 computed values identical. Nothing
   in purchase-o5.css, purchase-ps.css, option5.css or the theme sheet sets a
   height on the pill, its list or any ancestor, and enumerating the matching
   rules in the browser found none either. That is because uikit.css is reached
   through an @import INSIDE global.css: it is a separate stylesheet object,
   and walking document.styleSheets does not descend into it. Every probe I
   wrote was honestly reporting "no rule sets a height", and every one was
   looking in the wrong place.

   Found by serving modified copies of the sheets instead: global.css empty
   gave a correct card, global.css without its @imports gave a correct card,
   only-the-imports reproduced the fault, then one import at a time named
   uikit.css, then a binary search over its 183 rules named this one. When
   reasoning about the cascade fails, bisect what is served.

   (0,2,0) against uikit's (0,1,1), and !important because theirs is. Scoped to
   this card alone: the same uikit rule governs every other button in every
   .uk-form on the site, and whether any of those are wrong is not this
   commit's business. */
.uk-form .op-admin-pill { height: auto !important; }
/* letter-spacing: normal is the design's, and it is BOTH remaining
   differences at once. This page tracks its text 0.25px; the design's card
   does not. Over "Paid at the counter" that is about 5px, enough to wrap the
   subtitle to a second line -- the whole of the card's extra 16px -- and it is
   also the 2px by which "Complimentary" overruns its label box. Rule 0 takes
   the design's value. Scoped to this card: the tracking is the page's own
   elsewhere and changing that is not this commit's business. */
.uk-form .op-admin-pill, .uk-form .op-admin-pill * { letter-spacing: normal; }

/* text-transform: none, which is the design's, and it is the LAST 16px.
   purchase-o5.css's old .op-admin-pill rule -- the pre-redesign pill --
   carries text-transform:uppercase, and the design's replacement rule in this
   sheet does not mention the property, so it survived and INHERITED to the
   subtitle. The card was rendering "PAID AT THE COUNTER", about a fifth wider
   than the words it was given, which wrapped to a second line.

   It took a long time to see because every comparison of the TEXT agreed:
   textContent returns what the markup says, not what the screen shows, so the
   copy matched the design byte for byte while the rendering did not. What
   found it was widening the computed-property diff until something differed --
   the same card had already shown 23 of 26 properties identical, and
   text-transform was not among the 26 I had thought to ask for. */
.uk-form .op-admin-pill, .uk-form .op-admin-pill * { text-transform: none; }

/* ── STEP 4's FIELD STATES (Mac's ruling of 2026-10-13, option C) ──
   The green tick is "Old Buyer information.css"'s, rule for rule: a green
   circle with a white tick inside the field, and the dropdown's caret hidden
   while it shows. The red reason is the already-registered box
   (.co-dupe-error, option5.css), shown by step4-buyer.js with .is-on. A
   dropdown's border goes red as a text field's does (.co-ctl.is-error). */
#buyer .co-ctl.is-success{border-color:var(--o5-line);position:relative;padding-right:34px}
#buyer .co-ctl.is-success::after{content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;flex:none;background:var(--o5-green,#1f8a5b);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 8'/%3E%3C/svg%3E");background-size:10px 10px;background-repeat:no-repeat;background-position:center}
#buyer .co-trigger.is-success{border-color:var(--o5-line);position:relative;padding-right:36px}
#buyer .co-trigger.is-success::after{content:'';position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;flex:none;background:var(--o5-green,#1f8a5b);border-radius:50%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 8'/%3E%3C/svg%3E");background-size:10px 10px;background-repeat:no-repeat;background-position:center}
#buyer .co-trigger.is-success .co-caret{display:none}
#buyer [data-trigger].is-error{border-color:var(--o5-red,#d62133)}
/* ── THE BREAKDOWN'S VALUE, WHICH IS A SPAN HERE AND A <b> IN THE DESIGN ────
   Mac, 2026-10-14: the expanded breakdown was "completely distorted" -- the
   rows were two Bootstrap floats, so in a narrow cart the label and the
   amount squeezed into columns, wrapped over several lines and the last
   figure was clipped. Both renderers now emit the design's flex row
   (.op-cart-bd-r), whose rules this sheet already carries verbatim above.

   ONE DELIBERATE DEVIATION, reported rather than silent: the design's value
   element is `<b dir="ltr">CCY 000.00</b>`, a single element holding text.
   Ours stays a <span> wrapping two inner spans, because .price-span is read
   from ten places in the JS and .second-currency from two -- the LBP second
   line is built from them. Changing the element would have meant retyping ten
   Thymeleaf value blocks with their box-office and dual-currency variants, to
   gain nothing a reader could see. So the design's own `b` rule is extended
   to our value element instead; the rendering is the same. */
.op-cart-bd-r > .info-text {
  font-weight: 700;
  color: var(--o5-ink);
  white-space: nowrap;
}
.op-cart-bd-r.is-tot > .info-text { font-weight: 800; }

/* ── THE BREAKDOWN GETS THE WHOLE WIDTH, NOT A THIRD OF IT ──────────────────
   MEASURED: our breakdown row was 103px wide at 390 and 120px at 1440, while
   the design's is 260px and 308px. The content was never too wide -- the row
   was, and every amount then ran past its end. That is the clipping Mac saw.

   The cause is a class collision, not the design. Our breakdown element
   carries the legacy `st-summary-line-row` as well as `op-cart-bd`, and
   purchase-o5.css:487 declares

       .st-summary-line-row { display:grid; grid-template-columns:1fr auto 1fr; gap:10px }

   The design's `.op-cart-bd` sets `display:grid` and `grid-template-ROWS`
   only -- it never needed columns, because in the design that element has no
   other class. So the three-column template survived, the single child landed
   in the first 1fr, and (226 - two 10px gaps) / 2 is exactly the 103px
   measured. purchase-o5.css:1595 already neutralises this collision, but only
   under `.st-summary-sections`, which this cart is not inside.

   One column, and minmax(0,1fr) rather than 1fr so a long amount cannot push
   the track past its parent through the min-content floor. The row gap goes
   with it: the design spaces these rows with padding, and the inherited 10px
   would add to it. */
.op-cart-bd {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ...AND THE ROWS STACK. Second half of the same collision, visible only at
   desktop width: inside .st-summary-sections, purchase-o5.css:1596 declares
   `.st-summary-sections .ticket-inner > div { display:flex; ... }` for the old
   row structure -- and .op-cart-bd-in IS a direct div child of .ticket-inner,
   so it became a flex CONTAINER and its rows became flex ITEMS side by side,
   each shrunk to its content: 120px inside a 272px panel. At 390 that cart is
   not inside .st-summary-sections, which is why the two widths failed
   differently and why measuring only one would have "fixed" half of it.

   .st-summary .ticket-inner.st-summary-line-row > div (purchase-o5.css:1186)
   also matches it, at (0,3,1) -- so a first attempt at (0,3,0) lost and looked
   exactly like a rule with no effect. Four classes, (0,4,0), beats it. Counted
   rather than estimated: this page has cost three specificity losses already. */
.ticket-inner.st-summary-line-row.op-cart-bd > .op-cart-bd-in {
  display: block;
}

/* ── THE CARD MAC COMPARES AGAINST IS THE DESIGN'S data-cv="10" ─────────────
   Ruled 2026-10-14. The design page carries ten variants of this card behind
   #opCartLines[data-cv="N"], and the one in the reference is 10: a WHITE card,
   no grey band across the top, NO leading glyph, and the event name in a grey
   pill. Measured against the design before and after, rather than read off a
   screenshot.

   Those rules are copied here onto the card's own classes rather than left
   behind a variant attribute, because nothing in this application sets
   data-cv and a selector that never matches is worse than no selector: it
   looks like the design is honoured when it is not.

   The measured gaps this closes: our card was #f7f5f0 (the "beige panel"),
   its band was white and bordered, its radius 16px against the design's 20,
   and the event name was plain text. */
/* The three !importants are forced, and that is worth explaining rather than
   leaving as a smell: purchase-o5.css:1644 sets background, border-radius and
   padding with !important on `.st-summary-sections .ticket-item`, which IS
   this card -- it was written for the old beige card. An !important is only
   beatable by another at higher specificity, so a plain rule here applied its
   border-color and silently lost the other three, which measured as the beige
   panel, a 16px radius and 16/18 padding. The design's card has no padding of
   its own; the band and the body carry it, below. */
/* The add-on line (an SMS Ticket) is the same card: every rule here names
   it beside the ticket card, so the two cannot be drawn differently. */
.op-cart-card.is-ticket,
.op-cart-card.is-addon {
  background: #fff !important;
  border-color: #e4e2dc;
  border-radius: 20px !important;
  padding: 0 !important;
}
.op-cart-card.is-ticket .op-cart-cyl-ext,
.op-cart-card.is-addon .op-cart-cyl-ext {
  background: none;
  border-bottom: 0;
  padding: 14px 10px 0 16px;
}
.op-cart-card.is-ticket .op-cart-ev-n,
.op-cart-card.is-addon .op-cart-ev-n {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 999px;
  background: #f4f2ed;
  font-size: 11.5px;
  font-weight: 700;
  color: #55534e;
}
.op-cart-card.is-ticket .op-cart-cyl,
.op-cart-card.is-addon .op-cart-cyl { padding-top: 10px; }
/* The footer strip is TINTED in the design and was white here. Measured:
   rgba(255,255,255,.5) against the design's #faf9f6, with the rule above at
   line 1225 setting both background and border-top !important -- so these two
   must be !important as well to reach it. The design's own variant rule marks
   them !important for the same reason. */
.op-cart-card.is-ticket [data-bd],
.op-cart-card.is-addon [data-bd] {
  background: #faf9f6 !important;
  border-top-color: #f1f0ec !important;
}

/* THE DASHED RULE UNDER THE DATE ROW, which never appeared because the state
   class differs. The design opens the panel with .op-cart-card.is-open and
   styles the open body off it; cart-breakdown.js:52 toggles is-bd-open on the
   card instead (is-open goes on the panel). So the design's open-state rules
   -- the 12px margin, the 10px padding and the dashed rule -- matched nothing
   here. MEASURED: border-top was "0px none" against the design's
   "1px dashed rgb(212,210,203)". Same values, keyed on the class our own JS
   actually sets. */
.op-cart-card.is-bd-open .op-cart-bd-in {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #d4d2cb;
}

/* STEP 3, THE ADD-ON CARD AS BUILT (2026-10-14). The design draws the switch
   as a <button>; here it is a <label> for the checkbox insurance.js binds by
   name, so the money path is untouched. Bootstrap styles every label (a 5px
   bottom margin, bold, max-width), so those go; the box itself is kept out of
   sight but focusable, and its focus is drawn on the switch. */
.adx-sw{display:block;margin:0;max-width:none;font-weight:inherit}
.adx-sw-in{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.adx-sw:has(.adx-sw-in:focus-visible){outline:2px solid #1a1a1a;outline-offset:3px}
.adx-sw.is-busy{opacity:.55;cursor:progress}.adx-sw.is-busy .adx-sw-in{cursor:progress}
/* Unavailable (no ticket yet): the design's disabled switch -- .adx-sw:disabled there, a label holding a disabled box here. */
.adx-card.is-na .adx-sw{opacity:.45;cursor:not-allowed}.adx-card.is-na .adx-sw-in{cursor:not-allowed}
/* An author display beats [hidden]; these are shown and hidden by it. */
.adx-card[hidden],.adx-d[hidden],.adx-ddim[hidden]{display:none}
/* The design's text base under the card: its page is 16px with a normal
   line height. Here the card inherited the site's 14px and 28px line height,
   which stretched every row (11px taller at 390). The font stack stays the
   site's: Almarai there is limited to Arabic by unicode-range (almarai.css),
   so Latin text is already Plus Jakarta Sans. */
.adx-list{font-size:16px;line-height:normal}