/* ===== DIRECTORY + SHARED STYLES ===== */

  :root{
    --black:#000000;
    --ink:#15121A;
    --red:#E7326A;
    --pink:#E83B8D;
    --turq:#6BC0B0;
    --turq-dark:#4FA593;
    --cream:#FBF8F6;
    --paper:#FFFFFF;
    --line:#EFE9EA;
    --muted:#8A8087;
    --shadow: 0 8px 24px rgba(21,18,26,0.08);
    --shadow-lg: 0 20px 48px rgba(21,18,26,0.16);
    --r-sm:10px;
    --r-md:16px;
    --r-lg:24px;
  }
  html[data-theme="dark"]{
    --ink:#F7F3F5;
    --cream:#121017;
    --paper:#201A24;
    --line:#4E4353;
    --muted:#B7ABB3;
    --shadow: 0 10px 28px rgba(0,0,0,.55);
    --shadow-lg: 0 24px 56px rgba(0,0,0,.7);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Manrope',sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    transition:background-color .35s ease, color .35s ease;
  }
  body, .card, .chip, .cat-tile, .org-chip, .search-shell, .locale-pill, header.main, .btn-ghost, .utility-bar, .chip-rail{
    transition:background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
  }
  h1,h2,h3,h4,.display{
    font-family:'Outfit',sans-serif;
    letter-spacing:-0.02em;
  }
  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  .wrap{max-width:1360px; margin:0 auto; padding:0 32px;}
  ::selection{background:var(--red); color:#fff;}

  /* ---------- visually-hidden ---------- */
  .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

  /* ---------- TOP UTILITY BAR ---------- */
  .utility-bar{
    background:var(--black);
    color:#fff;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.04em;
  }
  .utility-bar .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:36px;
  }
  .utility-marquee-track{
    display:flex; gap:28px; white-space:nowrap; overflow:hidden;
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
  .utility-marquee-track span{opacity:.72; text-transform:uppercase;}
  .utility-marquee-track span.on{color:var(--turq); opacity:1;}
  .utility-right{display:flex; gap:18px; flex-shrink:0; padding-left:24px;}
  .utility-right a{opacity:.8;}
  .utility-right a:hover{opacity:1; color:var(--pink);}

  /* ---------- HEADER ---------- */
  header.main{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  html[data-theme="dark"] header.main{background:rgba(18,16,23,0.88);}
  html[data-theme="dark"] .search-shell{box-shadow:0 8px 24px rgba(0,0,0,.4);}
  html[data-theme="dark"] .card-media .media-badge{background:rgba(0,0,0,.7);}
  html[data-theme="dark"] .fav-btn{background:rgba(32,26,36,.94);}
  html[data-theme="dark"] .fav-btn svg{stroke:var(--ink);}
  html[data-theme="dark"] .fav-btn:hover{background:var(--paper); box-shadow:0 4px 10px rgba(0,0,0,.4);}
  .header-inner{
    display:flex; align-items:center; gap:28px;
    height:84px;
  }
  .logo img{height:34px; width:auto;}
  .logo{flex-shrink:0;}

  .locale-pill{
    display:flex; align-items:center; gap:8px;
    background:var(--paper);
    border:1.5px solid var(--line);
    border-radius:999px;
    padding:9px 16px 9px 14px;
    font-size:14px; font-weight:700;
    flex-shrink:0;
    transition:.15s;
  }
  .locale-pill:hover{border-color:var(--ink); background:var(--cream);}
  .locale-pill svg{width:16px; height:16px; flex-shrink:0;}
  .locale-pill .sub{color:var(--muted); font-weight:600;}

  .search-shell{
    flex:1;
    display:flex; align-items:center;
    background:var(--paper);
    border:1.5px solid var(--line);
    border-radius:999px;
    height:52px;
    padding:0 8px 0 20px;
    box-shadow:var(--shadow);
    transition:.15s;
  }
  .search-shell:focus-within{border-color:var(--red); box-shadow:0 0 0 4px rgba(231,50,106,.10);}
  .search-shell svg{width:18px; height:18px; color:var(--muted); flex-shrink:0;}
  .search-shell input{
    flex:1; border:none; outline:none; background:transparent;
    font-family:'Manrope'; font-size:15px; font-weight:600; color:var(--ink);
    padding:0 12px;
  }
  .search-shell input::placeholder{color:var(--muted); font-weight:600;}
  html[data-theme="dark"] .search-shell input::placeholder{color:#C9BFC5;}
  .search-shell .search-go{
    background:var(--black); color:#fff; border-radius:999px;
    height:38px; padding:0 20px; font-weight:700; font-size:13.5px;
    flex-shrink:0; transition:.15s;
  }
  .search-shell .search-go:hover{background:var(--red);}

  .header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .btn-ghost{
    padding:12px 18px; border-radius:999px; font-weight:700; font-size:14.5px;
    border:1.5px solid transparent; transition:.15s;
  }
  .btn-ghost:hover{background:var(--cream);}
  .btn-solid{
    padding:13px 22px; border-radius:999px; font-weight:800; font-size:14.5px;
    background:linear-gradient(120deg, var(--red), var(--pink));
    color:#fff; box-shadow:0 10px 24px rgba(231,50,106,.30);
    transition:.18s; display:inline-flex; align-items:center; gap:8px;
  }
  .btn-solid:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(231,50,106,.4);}

  /* ---------- CATEGORY CHIP RAIL ---------- */
  .chip-rail{
    border-bottom:1px solid var(--line);
    background:var(--paper);
  }
  .chip-track{
    display:flex; gap:10px; padding:14px 0;
    overflow-x:auto; scrollbar-width:none;
  }
  .chip-track::-webkit-scrollbar{display:none;}
  .chip{
    flex-shrink:0;
    display:flex; align-items:center; gap:8px;
    padding:10px 18px;
    border-radius:999px;
    border:1.5px solid var(--line);
    font-size:14px; font-weight:700;
    background:var(--paper);
    transition:.15s;
    white-space:nowrap;
  }
  .chip .ic{font-size:16px;}
  .chip:hover{border-color:var(--ink); background:var(--cream);}
  .chip.active{
    background:linear-gradient(120deg, var(--red), var(--pink));
    border-color:transparent; color:#fff;
    box-shadow:0 6px 16px rgba(231,50,106,.35);
  }

  /* ---------- THEME TOGGLE ---------- */
  .theme-toggle{
    flex-shrink:0;
    display:flex; align-items:center;
    padding:3px;
    border-radius:999px;
    border:1.5px solid var(--line);
    background:var(--paper);
    transition:.2s;
  }
  .theme-toggle:hover{border-color:var(--red);}
  .tt-track{
    position:relative;
    width:58px; height:32px;
    border-radius:999px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 7px;
  }
  .tt-icon{font-size:13px; line-height:1; position:relative; z-index:1; opacity:.55; transition:.2s;}
  .tt-thumb{
    position:absolute; top:2px; left:2px;
    width:28px; height:28px; border-radius:50%;
    background:linear-gradient(120deg, var(--red), var(--pink));
    box-shadow:0 3px 8px rgba(231,50,106,.4);
    transition:transform .3s cubic-bezier(.2,.8,.3,1), background .3s;
    z-index:0;
  }
  html[data-theme="dark"] .tt-thumb{
    transform:translateX(26px);
    background:linear-gradient(120deg, var(--turq-dark), var(--turq));
    box-shadow:0 3px 8px rgba(107,192,176,.4);
  }
  html[data-theme="dark"] .tt-icon.moon{opacity:1;}
  html:not([data-theme="dark"]) .tt-icon.sun{opacity:1;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    background:var(--black);
    color:#fff;
    overflow:hidden;
    padding:64px 0 92px;
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(60% 90% at 85% 10%, rgba(231,50,106,.55), transparent 60%),
      radial-gradient(45% 60% at 8% 90%, rgba(107,192,176,.45), transparent 60%),
      radial-gradient(30% 40% at 55% 30%, rgba(232,59,141,.35), transparent 60%);
  }
  .hero-inner{position:relative; z-index:2;}
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:var(--turq);
    background:rgba(107,192,176,.14);
    border:1px solid rgba(107,192,176,.4);
    padding:7px 14px; border-radius:999px;
    margin-bottom:22px;
  }
  .hero h1{
    font-size:clamp(38px, 5.4vw, 74px);
    line-height:0.98;
    font-weight:800;
    max-width:900px;
  }
  .hero h1 em{
    font-style:normal;
    background:linear-gradient(120deg, var(--pink), var(--red) 60%, var(--turq));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-sub{
    margin-top:20px; font-size:17px; color:rgba(255,255,255,.68);
    max-width:560px; font-weight:500; line-height:1.55;
  }
  .hero-quick{
    margin-top:36px;
    display:flex; gap:12px; flex-wrap:wrap;
  }
  .qbtn{
    background:rgba(255,255,255,.08);
    border:1.5px solid rgba(255,255,255,.18);
    color:#fff; font-weight:700; font-size:14px;
    padding:11px 18px; border-radius:999px;
    display:flex; align-items:center; gap:8px;
    transition:.15s;
  }
  .qbtn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4);}

  .hero-stats{
    position:relative; z-index:2;
    display:flex; gap:44px; margin-top:56px; flex-wrap:wrap;
  }
  .hero-stats .stat b{
    font-family:'Outfit'; font-size:30px; font-weight:800; display:block;
  }
  .hero-stats .stat span{
    font-size:13px; color:rgba(255,255,255,.55); font-weight:600;
  }

  /* ---------- SECTION HEADER ---------- */
  .section{padding:56px 0;}
  .section.tight{padding:40px 0;}
  .sec-head{
    display:flex; align-items:flex-end; justify-content:space-between;
    margin-bottom:26px; gap:20px; flex-wrap:wrap;
  }
  .sec-head .tag{
    font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:var(--red); margin-bottom:8px; display:block;
  }
  .sec-head h2{font-size:clamp(24px,3vw,34px); font-weight:800;}
  .sec-head p{color:var(--muted); font-weight:600; margin-top:6px; font-size:14.5px;}
  .see-all{
    font-weight:800; font-size:13.5px; color:var(--ink);
    display:flex; align-items:center; gap:6px; flex-shrink:0;
    padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper);
    transition:.15s;
  }
  .see-all:hover{color:var(--red); border-color:var(--red); background:var(--cream); gap:10px;}

  /* ---------- SCROLL ROW ---------- */
  .scroll-row{
    display:flex; gap:20px; overflow-x:auto; padding-bottom:8px;
    scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .scroll-row::-webkit-scrollbar{display:none;}
  .scroll-row .card{scroll-snap-align:start;}

  /* ---------- EVENT CARD ---------- */
  .card{
    flex-shrink:0; width:296px;
    background:var(--paper);
    border-radius:var(--r-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
    border:1px solid var(--line);
    transition:.22s cubic-bezier(.2,.8,.3,1);
    display:flex; flex-direction:column;
  }
  .card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
  .card-media{
    position:relative; height:168px; width:100%;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
  }
  .card-media .ic-big{font-size:52px; opacity:.9; filter:drop-shadow(0 6px 14px rgba(0,0,0,.18));}
  .media-badge{
    position:absolute; top:12px; left:12px;
    background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
    color:#fff; font-size:11px; font-weight:800; letter-spacing:.03em;
    padding:6px 10px; border-radius:8px; text-align:center; line-height:1.15;
  }
  .media-badge .mo{display:block; font-size:9.5px; text-transform:uppercase; opacity:.8;}
  .media-badge .dy{display:block; font-size:15px;}
  .fav-btn{
    position:absolute; top:12px; right:12px;
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.92);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    transition:.15s;
  }
  .fav-btn:hover{background:#fff; transform:scale(1.08);}
  .fav-btn svg{width:16px; height:16px; stroke:var(--ink); fill:none; stroke-width:2;}
  .tag-pill{
    position:absolute; bottom:12px; left:12px;
    font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    padding:5px 10px; border-radius:7px; color:#fff;
  }
  .tag-pill.selling{background:var(--red);}
  .tag-pill.new{background:var(--turq-dark);}
  .tag-pill.soldout{background:#2A2429;}

  .card-org{
    display:flex; align-items:center; gap:8px;
    padding:14px 16px 0;
    margin-top:-26px;
  }
  .org-badge{
    width:40px; height:40px; border-radius:12px;
    border:3px solid var(--paper);
    display:flex; align-items:center; justify-content:center;
    font-family:'Outfit'; font-weight:800; font-size:14px; color:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.18);
    flex-shrink:0;
  }
  .org-name{font-size:12px; font-weight:700; color:var(--muted); margin-top:2px;}

  .card-body{padding:10px 16px 18px; flex:1; display:flex; flex-direction:column;}
  .card-body h3{
    font-size:16.5px; font-weight:700; line-height:1.28; margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .card-meta{
    display:flex; align-items:center; gap:6px;
    font-size:13px; color:var(--muted); font-weight:600; margin-bottom:4px;
  }
  .card-meta svg{width:14px; height:14px; flex-shrink:0; opacity:.7;}
  .card-foot{
    margin-top:auto; padding-top:12px;
    display:flex; align-items:center; justify-content:space-between;
    border-top:1px dashed var(--line);
  }
  .price{font-family:'Outfit'; font-size:16px; font-weight:800;}
  .price span{font-size:11px; color:var(--muted); font-weight:700; display:block; margin-top:-2px;}
  .rating{
    display:flex; align-items:center; gap:5px; font-size:13px; font-weight:800;
  }
  .rating svg{width:14px; height:14px; fill:var(--turq-dark); stroke:none;}

  /* card media gradient variants */
  .grad-1{background:linear-gradient(135deg,#E7326A,#F58A8A);}
  .grad-2{background:linear-gradient(135deg,#6BC0B0,#2E7D6C);}
  .grad-3{background:linear-gradient(135deg,#3A2E6E,#E83B8D);}
  .grad-4{background:linear-gradient(135deg,#111014,#3A3038);}
  .grad-5{background:linear-gradient(135deg,#F2A93B,#E7326A);}
  .grad-6{background:linear-gradient(135deg,#1D8FA5,#6BC0B0);}
  .grad-7{background:linear-gradient(135deg,#E83B8D,#7A2E8C);}
  .grad-8{background:linear-gradient(135deg,#0E7C6B,#111014);}

  .org-1{background:#E7326A;} .org-2{background:#111014;} .org-3{background:#1D8FA5;}
  .org-4{background:#E83B8D;} .org-5{background:#2E7D6C;} .org-6{background:#8C5B2E;}
  .org-7{background:#4F2E8C;} .org-8{background:#B7742E;}

  /* ---------- CATEGORY TILES (explore grid) ---------- */
  .cat-grid{
    display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
  }
  .cat-tile{
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
    padding:22px 16px; text-align:center; transition:.18s;
  }
  .cat-tile:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent;}
  .cat-tile .ic{font-size:30px; display:block; margin-bottom:10px;}
  .cat-tile .lb{font-size:13.5px; font-weight:800;}
  .cat-tile .ct{font-size:11.5px; color:var(--muted); font-weight:700; margin-top:2px;}

  /* ---------- WEEKEND STRIP (dark banner) ---------- */
  .strip{
    background:linear-gradient(120deg, #14121A 0%, #2A1420 60%, #14121A 100%);
    color:#fff; border-radius:var(--r-lg);
    padding:44px 44px;
    display:flex; align-items:center; justify-content:space-between; gap:32px;
    flex-wrap:wrap;
    position:relative; overflow:hidden;
  }
  .strip::after{
    content:"🌴"; position:absolute; right:-10px; bottom:-30px; font-size:160px; opacity:.06;
  }
  .strip h3{font-size:clamp(22px,2.6vw,30px); font-weight:800; max-width:480px; position:relative; z-index:1;}
  .strip p{color:rgba(255,255,255,.6); font-weight:600; margin-top:8px; font-size:14.5px; position:relative; z-index:1;}
  .strip .btn-solid{position:relative; z-index:1; flex-shrink:0;}

  /* ---------- MULTI-TENANT ORGANIZER STRIP ---------- */
  .org-row{
    display:flex; gap:14px; overflow-x:auto; scrollbar-width:none;
  }
  .org-row::-webkit-scrollbar{display:none;}
  .org-chip{
    flex-shrink:0; display:flex; align-items:center; gap:10px;
    background:var(--paper); border:1px solid var(--line); border-radius:999px;
    padding:8px 18px 8px 8px; transition:.15s;
  }
  .org-chip:hover{border-color:var(--ink); box-shadow:var(--shadow);}
  .org-chip .dot{
    width:34px; height:34px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:'Outfit'; font-weight:800; font-size:13px;
  }
  .org-chip .info b{font-size:13.5px; font-weight:800; display:block;}
  .org-chip .info span{font-size:11.5px; color:var(--muted); font-weight:700;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--black); color:rgba(255,255,255,.7);
    padding:64px 0 28px; margin-top:40px;
  }
  .foot-grid{
    display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
    padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.12);
  }
  .foot-grid img{height:28px; margin-bottom:16px;}
  .foot-grid p{font-size:13.5px; line-height:1.6; max-width:280px; color:rgba(255,255,255,.5);}
  .foot-grid h4{color:#fff; font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px;}
  .foot-grid ul{list-style:none;}
  .foot-grid li{margin-bottom:10px;}
  .foot-grid a{font-size:14px; font-weight:600; color:rgba(255,255,255,.65); transition:.15s;}
  .foot-grid a:hover{color:var(--pink);}
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding-top:24px; font-size:12.5px; color:rgba(255,255,255,.42); flex-wrap:wrap; gap:10px;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:1100px){
    .cat-grid{grid-template-columns:repeat(4,1fr);}
    .foot-grid{grid-template-columns:1.4fr 1fr 1fr;}
    .foot-grid .foot-col-4{display:none;}
  }
  @media (max-width:860px){
    .wrap{padding:0 20px;}
    .header-inner{height:auto; padding:14px 0; flex-wrap:wrap;}
    .locale-pill{order:1;}
    .header-actions{order:2; margin-left:auto;}
    .search-shell{order:3; width:100%; flex-basis:100%;}
    .utility-right a:not(:last-child){display:none;}
    .cat-grid{grid-template-columns:repeat(3,1fr);}
    .hero{padding:44px 0 64px;}
    .hero-stats{gap:28px;}
    .strip{flex-direction:column; align-items:flex-start; padding:32px 24px;}
  }
  @media (max-width:520px){
    .cat-grid{grid-template-columns:repeat(2,1fr);}
    .btn-ghost{display:none;}
    .foot-grid{grid-template-columns:1fr 1fr;}
  }


  /* ===== EVENT DETAIL STYLES ===== */

  :root{
    --black:#000000;
    --ink:#15121A;
    --red:#E7326A;
    --pink:#E83B8D;
    --turq:#6BC0B0;
    --turq-dark:#4FA593;
    --cream:#FBF8F6;
    --paper:#FFFFFF;
    --line:#EFE9EA;
    --muted:#8A8087;
    --shadow: 0 8px 24px rgba(21,18,26,0.08);
    --shadow-lg: 0 20px 48px rgba(21,18,26,0.16);
    --r-sm:10px;
    --r-md:16px;
    --r-lg:24px;
  }
  html[data-theme="dark"]{
    --ink:#F7F3F5;
    --cream:#121017;
    --paper:#201A24;
    --line:#4E4353;
    --muted:#B7ABB3;
    --shadow: 0 10px 28px rgba(0,0,0,.55);
    --shadow-lg: 0 24px 56px rgba(0,0,0,.7);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Manrope',sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    transition:background-color .35s ease, color .35s ease;
    padding-bottom:0;
  }
  body, .card, .chip, .cat-tile, .org-chip, .search-shell, .locale-pill, header.main, .btn-ghost, .nav-item, .ticket-row, .side-card, .cart-panel, .accordion-item{
    transition:background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
  }
  h1,h2,h3,h4,.display{font-family:'Outfit',sans-serif; letter-spacing:-0.02em;}
  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  .wrap{max-width:1360px; margin:0 auto; padding:0 32px;}
  ::selection{background:var(--red); color:#fff;}
  .vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;}

  /* ---------- HEADER (compact, reused pattern) ---------- */
  header.main{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,0.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  html[data-theme="dark"] header.main{background:rgba(18,16,23,0.88);}
  .back-btn{
    display:flex; align-items:center; gap:8px; flex-shrink:0;
    font-weight:800; font-size:14px; padding:10px 16px 10px 10px;
    border-radius:999px; border:1.5px solid var(--line); background:var(--paper);
    transition:.15s;
  }
  .back-btn:hover{border-color:var(--ink); background:var(--cream);}
  .back-btn svg{width:16px; height:16px;}
  .header-spacer{flex:1;}
  .header-actions{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .icon-btn{
    width:42px; height:42px; border-radius:50%;
    border:1.5px solid var(--line); background:var(--paper);
    display:flex; align-items:center; justify-content:center;
    transition:.15s;
  }
  .icon-btn:hover{border-color:var(--ink); background:var(--cream);}
  .icon-btn svg{width:18px; height:18px; stroke:var(--ink); fill:none; stroke-width:2;}
  .icon-btn.faved svg{fill:var(--red); stroke:var(--red);}
  .btn-solid:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(231,50,106,.4);}
  .btn-solid svg{width:16px; height:16px;}

  .theme-toggle{flex-shrink:0; display:flex; align-items:center; padding:3px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper); transition:.2s;}
  .theme-toggle:hover{border-color:var(--red);}
  .tt-track{position:relative; width:58px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:space-between; padding:0 7px;}
  .tt-icon{font-size:13px; line-height:1; position:relative; z-index:1; opacity:.55; transition:.2s;}
  .tt-thumb{position:absolute; top:2px; left:2px; width:28px; height:28px; border-radius:50%; background:linear-gradient(120deg, var(--red), var(--pink)); box-shadow:0 3px 8px rgba(231,50,106,.4); transition:transform .3s cubic-bezier(.2,.8,.3,1), background .3s; z-index:0;}
  html[data-theme="dark"] .tt-thumb{transform:translateX(26px); background:linear-gradient(120deg, var(--turq-dark), var(--turq)); box-shadow:0 3px 8px rgba(107,192,176,.4);}
  html[data-theme="dark"] .tt-icon.moon{opacity:1;}
  html:not([data-theme="dark"]) .tt-icon.sun{opacity:1;}

  /* header condensed bar (appears on scroll) */
  .header-condensed{
    display:flex; align-items:center; gap:12px;
    max-width:0; overflow:hidden; opacity:0; transition:.25s;
  }
  body.scrolled .header-condensed{max-width:420px; opacity:1; margin-right:8px;}
  .hc-thumb{width:34px; height:34px; border-radius:9px; flex-shrink:0; background:linear-gradient(135deg,#F2A93B,#E7326A); display:flex; align-items:center; justify-content:center; font-size:16px;}
  .hc-text b{font-size:13.5px; display:block; line-height:1.2;}
  .hc-text span{font-size:11.5px; color:var(--muted); font-weight:700;}

  /* ---------- HERO ---------- */
  .hero-banner{
    position:relative; height:340px; overflow:hidden;
    background:linear-gradient(135deg,#F2A93B,#E7326A 55%,#7A2E8C);
  }
  .hero-banner::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 100%);
  }
  .hero-emoji{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:130px; opacity:.22; filter:drop-shadow(0 10px 30px rgba(0,0,0,.3));
  }
  .hero-content{
    position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 0 26px;
  }
  .hero-crumbs{color:rgba(255,255,255,.75); font-size:12.5px; font-weight:700; margin-bottom:14px; display:flex; gap:6px; align-items:center;}
  .hero-crumbs a:hover{color:#fff;}
  .hero-badges{display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
  .hero-badge{
    background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.3); color:#fff;
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    padding:6px 12px; border-radius:999px;
  }
  .hero-badge.hot{background:var(--red); border-color:transparent;}
  .hero-content h1{color:#fff; font-size:clamp(28px,3.6vw,46px); font-weight:800; line-height:1.05; max-width:760px;}

  /* ---------- ORGANIZER STRIP (overlaps hero, like restaurant-logo) ---------- */
  .organizer-strip{
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  .org-strip-inner{
    display:flex; align-items:center; gap:18px; padding:0 0;
    position:relative; margin-top:-34px; padding-top:0; padding-bottom:20px;
  }
  .org-logo{
    width:76px; height:76px; border-radius:18px; flex-shrink:0;
    border:4px solid var(--paper);
    background:#E7326A; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:'Outfit'; font-weight:800; font-size:24px;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
  }
  .org-strip-text{padding-top:44px; flex:1; min-width:0;}
  .org-strip-text .byline{font-size:12.5px; color:var(--muted); font-weight:700; margin-bottom:2px;}
  .org-strip-text .orgname{font-size:16px; font-weight:800; display:flex; align-items:center; gap:8px;}
  .verified{
    display:inline-flex; align-items:center; gap:4px; color:var(--turq-dark); font-size:11.5px; font-weight:800;
    background:rgba(107,192,176,.14); padding:3px 9px; border-radius:999px;
  }
  .org-strip-meta{
    padding-top:44px; display:flex; gap:26px; flex-shrink:0;
  }
  .osm-item{display:flex; flex-direction:column; gap:2px;}
  .osm-item .v{font-family:'Outfit'; font-weight:800; font-size:16px; display:flex; align-items:center; gap:5px;}
  .osm-item .l{font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
  .osm-item svg{width:14px; height:14px; fill:var(--turq-dark); stroke:none;}

  /* ---------- QUICK FACTS BAR ---------- */
  .facts-bar{
    background:var(--paper); border-bottom:1px solid var(--line);
  }
  .facts-row{display:flex; gap:0; padding:16px 0; flex-wrap:wrap;}
  .fact{display:flex; align-items:center; gap:10px; padding-right:28px; margin-right:28px; border-right:1px solid var(--line);}
  .fact:last-child{border-right:none; margin-right:0; padding-right:0;}
  .fact-icon{width:38px; height:38px; border-radius:10px; background:var(--cream); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
  .fact .v{font-size:13.5px; font-weight:800;}
  .fact .l{font-size:11px; color:var(--muted); font-weight:700;}

  /* ---------- LAYOUT ---------- */
  .layout{display:grid; grid-template-columns:220px 1fr 340px; gap:36px; padding:36px 0 80px; align-items:start;}

  /* left sticky section nav */
  .side-nav{position:sticky; top:94px; display:flex; flex-direction:column; gap:2px;}
  .side-nav .eyebrow{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px; padding-left:14px;}
  .nav-item{
    display:flex; align-items:center; gap:10px;
    padding:11px 14px; border-radius:10px; font-size:14px; font-weight:700; color:var(--muted);
    border-left:2.5px solid transparent;
  }
  .nav-item:hover{color:var(--ink); background:var(--paper);}
  .nav-item.active{color:var(--red); background:var(--paper); border-left-color:var(--red);}

  /* main content */
  .content{min-width:0; display:flex; flex-direction:column; gap:52px;}
  .content-section h2{font-size:22px; font-weight:800; margin-bottom:6px;}
  .content-section .sub{font-size:13.5px; color:var(--muted); font-weight:600; margin-bottom:20px;}

  .about-text{font-size:14.5px; line-height:1.75; color:var(--ink); max-width:640px;}
  .about-text + .about-text{margin-top:14px;}
  .highlight-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px;}
  .h-chip{
    display:flex; align-items:center; gap:7px; font-size:13px; font-weight:700;
    padding:9px 14px; border-radius:999px; background:var(--paper); border:1px solid var(--line);
  }

  /* Popular tickets row */
  .popular-row{display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none;}
  .popular-row::-webkit-scrollbar{display:none;}
  .pop-card{
    flex-shrink:0; width:220px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
    padding:16px; box-shadow:var(--shadow); position:relative;
  }
  .pop-card .pop-badge{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--red); margin-bottom:8px; display:block;}
  .pop-card h4{font-size:14.5px; font-weight:800; margin-bottom:4px;}
  .pop-card .price{font-size:13.5px; color:var(--muted); font-weight:700; margin-bottom:12px;}
  .pop-add{
    width:100%; padding:9px; border-radius:9px; background:var(--cream); border:1.5px solid var(--line);
    font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .pop-add:hover{border-color:var(--red); color:var(--red);}

  /* Ticket type list (menu-item pattern) */
  .ticket-cat{margin-bottom:34px;}
  .ticket-cat:last-child{margin-bottom:0;}
  .ticket-cat-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px;}
  .ticket-cat-head h3{font-size:16.5px; font-weight:800;}
  .ticket-cat-head span{font-size:12.5px; color:var(--muted); font-weight:700;}
  .ticket-list{display:flex; flex-direction:column; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line);}
  .ticket-row{
    display:flex; align-items:center; gap:18px; padding:18px 20px;
    background:var(--paper);
  }
  .ticket-row + .ticket-row{border-top:1px solid var(--line);}
  .ticket-row-media{
    width:64px; height:64px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:26px;
  }
  .ticket-row-info{flex:1; min-width:0;}
  .ticket-row-info h4{font-size:15px; font-weight:800; margin-bottom:4px; display:flex; align-items:center; gap:8px;}
  .mini-tag{font-size:10px; font-weight:800; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:rgba(107,192,176,.15); color:var(--turq-dark);}
  .mini-tag.low{background:rgba(231,50,106,.12); color:var(--red);}
  .ticket-row-info p{font-size:13px; color:var(--muted); line-height:1.5; max-width:440px;}
  .ticket-row-price{flex-shrink:0; text-align:right; min-width:74px;}
  .ticket-row-price b{font-family:'Outfit'; font-size:17px; font-weight:800; display:block;}
  .ticket-row-price span{font-size:11px; color:var(--muted); font-weight:700;}

  .stepper{
    display:flex; align-items:center; gap:0; flex-shrink:0;
    border:1.5px solid var(--line); border-radius:999px; overflow:hidden; background:var(--cream);
  }
  .stepper button{
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:800; color:var(--ink);
  }
  .stepper button:hover{background:var(--paper); color:var(--red);}
  .stepper .qty{width:26px; text-align:center; font-weight:800; font-size:14px;}
  .add-btn{
    width:38px; height:38px; border-radius:50%; flex-shrink:0;
    background:var(--ink); color:var(--cream);
    display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800;
    transition:.15s;
  }
  .add-btn:hover{background:var(--red); color:#fff; transform:scale(1.06);}

  /* Lineup / schedule */
  .lineup-list{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
  .lineup-row{display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--paper);}
  .lineup-row + .lineup-row{border-top:1px solid var(--line);}
  .lineup-time{width:64px; flex-shrink:0; font-family:'Outfit'; font-weight:800; font-size:14px; color:var(--red);}
  .lineup-avatar{width:42px; height:42px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff;}
  .lineup-info b{font-size:14px; font-weight:800; display:block;}
  .lineup-info span{font-size:12px; color:var(--muted); font-weight:600;}

  /* Venue / map */
  .venue-box{display:flex; gap:20px; align-items:stretch; flex-wrap:wrap;}
  .venue-map{
    flex:1; min-width:280px; height:220px; border-radius:var(--r-md); border:1px solid var(--line);
    background:
      repeating-linear-gradient(0deg, transparent, transparent 27px, var(--line) 28px),
      repeating-linear-gradient(90deg, transparent, transparent 27px, var(--line) 28px),
      var(--cream);
    position:relative; overflow:hidden;
  }
  .venue-pin{position:absolute; top:48%; left:52%; transform:translate(-50%,-50%); font-size:32px; filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));}
  .venue-info{flex:1; min-width:240px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
  .venue-info h4{font-size:16px; font-weight:800;}
  .venue-info p{font-size:13.5px; color:var(--muted); line-height:1.6;}
  .venue-actions{display:flex; gap:10px;}
  .btn-outline{
    padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); font-weight:800; font-size:13px;
    background:var(--paper); display:inline-flex; align-items:center; gap:7px;
  }
  .btn-outline:hover{border-color:var(--ink);}

  /* FAQ accordion */
  .accordion{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;}
  .accordion-item{background:var(--paper);}
  .accordion-item + .accordion-item{border-top:1px solid var(--line);}
  .accordion-q{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:17px 20px; font-weight:700; font-size:14px; cursor:pointer;
  }
  .accordion-q svg{width:16px; height:16px; flex-shrink:0; transition:.2s;}
  .accordion-item.open .accordion-q svg{transform:rotate(180deg);}
  .accordion-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .accordion-a p{padding:0 20px 18px; font-size:13.5px; color:var(--muted); line-height:1.6; max-width:560px;}

  /* ---------- STICKY CART PANEL ---------- */
  .cart-panel{
    position:sticky; top:94px;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg); overflow:hidden;
  }
  .cart-head{padding:20px 22px 16px; border-bottom:1px dashed var(--line);}
  .cart-head h3{font-size:15.5px; font-weight:800; display:flex; align-items:center; gap:8px;}
  .cart-head span{font-size:12px; color:var(--muted); font-weight:700; margin-top:3px; display:block;}
  .cart-empty{padding:34px 22px; text-align:center;}
  .cart-empty .ic{font-size:34px; margin-bottom:10px; opacity:.5;}
  .cart-empty p{font-size:13px; color:var(--muted); font-weight:600; line-height:1.6;}
  .cart-items{padding:14px 22px; display:none; flex-direction:column; gap:12px;}
  .cart-items.visible{display:flex;}
  .cart-line{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px;}
  .cart-line .cl-name{font-weight:700;}
  .cart-line .cl-qty{color:var(--muted); font-weight:700; font-size:12px;}
  .cart-line .cl-price{font-weight:800; font-family:'Outfit'; flex-shrink:0;}
  .cart-foot{padding:16px 22px 22px; border-top:1px solid var(--line); display:none;}
  .cart-foot.visible{display:block;}
  .cf-row{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); font-weight:700; margin-bottom:8px;}
  .cf-total{display:flex; justify-content:space-between; font-size:16px; font-weight:800; margin:14px 0 18px; padding-top:12px; border-top:1px dashed var(--line);}
  .cf-checkout{
    width:100%; padding:14px; border-radius:999px; font-weight:800; font-size:14.5px;
    background:linear-gradient(120deg, var(--red), var(--pink)); color:#fff;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 10px 24px rgba(231,50,106,.3);
  }
  .cf-checkout:hover{transform:translateY(-1px);}
  .cf-secure{display:flex; align-items:center; justify-content:center; gap:6px; font-size:11px; color:var(--muted); font-weight:700; margin-top:12px;}
  .cf-secure svg{width:12px; height:12px;}

  /* ---------- MOBILE STICKY BAR ---------- */
  .mobile-bar{
    display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--paper); border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,0,0,.12);
    padding:14px 20px; align-items:center; justify-content:space-between; gap:14px;
  }
  .mobile-bar .mb-info{display:flex; flex-direction:column;}
  .mobile-bar .mb-info b{font-family:'Outfit'; font-size:16px; font-weight:800;}
  .mobile-bar .mb-info span{font-size:11.5px; color:var(--muted); font-weight:700;}
  .mobile-bar .btn-solid{flex-shrink:0;}

  @media (max-width:1180px){
    .layout{grid-template-columns:190px 1fr; }
    .cart-panel{display:none;}
    .mobile-bar.has-items{display:flex;}
  }
  @media (max-width:860px){
    .wrap{padding:0 20px;}
    .layout{grid-template-columns:1fr; padding-top:24px;}
    .side-nav{position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:4px;}
    .side-nav .eyebrow{display:none;}
    .nav-item{border-left:none; border-bottom:2.5px solid transparent; white-space:nowrap; flex-shrink:0;}
    .nav-item.active{border-bottom-color:var(--red);}
    .org-strip-inner{flex-wrap:wrap; margin-top:-28px;}
    .org-strip-meta{padding-top:14px; width:100%; justify-content:space-between;}
    .hero-banner{height:260px;}
    .facts-row{overflow-x:auto; flex-wrap:nowrap;}
    .fact{flex-shrink:0;}
    body{padding-bottom:78px;}
  }


  /* ===== detail ticket-media gradients ===== */

  .grad-a{background:linear-gradient(135deg,#F2A93B,#E7326A);}
  .grad-b{background:linear-gradient(135deg,#6BC0B0,#2E7D6C);}
  .grad-c{background:linear-gradient(135deg,#1D8FA5,#6BC0B0);}
  .grad-d{background:linear-gradient(135deg,#7A2E8C,#E83B8D);}
  .grad-e{background:linear-gradient(135deg,#8C5B2E,#F2A93B);}

  /* ===== CHECKOUT FLOW ===== */
  .checkout-header{
    position:sticky; top:0; z-index:60;
    background:rgba(255,255,255,0.92); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  html[data-theme="dark"] .checkout-header{background:rgba(18,16,23,0.88);}
  .checkout-header-inner{display:flex; align-items:center; gap:24px; height:74px;}
  .checkout-lock{
    display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted);
    flex-shrink:0;
  }
  .checkout-lock svg{width:14px; height:14px;}

  .steps-pills{display:flex; align-items:center; gap:0; flex:1; justify-content:center;}
  .step-pill{
    display:flex; align-items:center; gap:8px;
    font-size:13px; font-weight:800; color:var(--muted);
    padding:8px 4px;
  }
  .step-pill .num{
    width:26px; height:26px; border-radius:50%; flex-shrink:0;
    background:var(--cream); border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color:var(--muted);
    transition:.2s;
  }
  .step-pill.active .num{background:linear-gradient(120deg, var(--red), var(--pink)); border-color:transparent; color:#fff;}
  .step-pill.active{color:var(--ink);}
  .step-pill.done .num{background:var(--turq-dark); border-color:transparent; color:#fff; font-size:0;}
  .step-pill.done .num::after{content:"✓"; font-size:12px;}
  .step-line{width:34px; height:2px; background:var(--line); flex-shrink:0; margin:0 4px;}
  .step-line.done{background:var(--turq-dark);}
  .step-pill .lbl{display:none;}
  @media (min-width:760px){ .step-pill .lbl{display:inline;} }

  .checkout-layout{display:grid; grid-template-columns:1fr 360px; gap:36px; padding:40px 0 90px; align-items:start;}
  .checkout-panel{min-width:0;}
  .checkout-step{display:none;}
  .checkout-step.active{display:block;}
  .checkout-step h2{font-size:22px; font-weight:800; margin-bottom:6px;}
  .checkout-step .sub{font-size:13.5px; color:var(--muted); font-weight:600; margin-bottom:26px;}

  .review-list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin-bottom:22px;}
  .review-row{display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--paper);}
  .review-row + .review-row{border-top:1px solid var(--line);}
  .review-row .rr-name{font-weight:800; font-size:14px;}
  .review-row .rr-sub{font-size:12px; color:var(--muted); font-weight:600; margin-top:2px;}
  .review-row .rr-info{flex:1; min-width:0;}
  .review-row .rr-price{font-family:'Outfit'; font-weight:800; font-size:15px; flex-shrink:0; min-width:70px; text-align:right;}
  .review-empty{padding:50px 20px; text-align:center; border:1px dashed var(--line); border-radius:var(--r-md); margin-bottom:22px;}
  .review-empty .ic{font-size:36px; margin-bottom:12px; opacity:.5;}
  .review-empty p{color:var(--muted); font-weight:600; font-size:13.5px; margin-bottom:16px;}

  .promo-row{display:flex; gap:10px; margin-bottom:8px;}
  .promo-row input{
    flex:1; background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
    padding:12px 14px; font-family:'Manrope'; font-size:13.5px; color:var(--ink); outline:none;
  }
  .promo-row input:focus{border-color:var(--red);}
  .promo-row button{
    padding:0 20px; border-radius:10px; border:1.5px solid var(--line); font-weight:800; font-size:13px;
    background:var(--paper); flex-shrink:0;
  }
  .promo-row button:hover{border-color:var(--ink);}

  .currency-row{display:flex; gap:8px; margin-bottom:26px;}
  .cur-chip{
    padding:8px 16px; border-radius:999px; border:1.5px solid var(--line); font-weight:800; font-size:12.5px;
    background:var(--paper);
  }
  .cur-chip.active{background:var(--ink); color:var(--cream); border-color:var(--ink);}

  .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .form-group{display:flex; flex-direction:column; gap:6px;}
  .form-group.full{grid-column:1 / -1;}
  .form-group label{font-size:12.5px; font-weight:800;}
  .form-group label .req{color:var(--red);}
  .form-group input, .form-group select{
    background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
    padding:12px 14px; font-family:'Manrope'; font-size:14px; color:var(--ink); outline:none; width:100%;
  }
  .form-group input::placeholder{color:var(--muted);}
  .form-group input:focus, .form-group select:focus{border-color:var(--red);}
  .form-group select{appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238A8087' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position:right 12px center; background-repeat:no-repeat; background-size:1.2em; padding-right:36px; cursor:pointer;}
  .checkbox-row{display:flex; align-items:flex-start; gap:10px; margin-top:6px;}
  .checkbox-row input{width:16px; height:16px; margin-top:2px; accent-color:var(--red); flex-shrink:0;}
  .checkbox-row label{font-size:12.5px; color:var(--muted); font-weight:600; line-height:1.5;}
  .checkbox-row a{color:var(--red); font-weight:700;}

  .pay-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:26px;}
  .pay-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    padding:18px 12px; border-radius:var(--r-md); border:1.5px solid var(--line); background:var(--paper);
    cursor:pointer; transition:.15s; text-align:center;
  }
  .pay-tile:hover{border-color:var(--ink);}
  .pay-tile.selected{border-color:var(--red); box-shadow:0 0 0 3px rgba(231,50,106,.12);}
  .pay-tile img{height:22px; width:auto; max-width:80px; object-fit:contain;}
  .pay-tile .pt-ic{font-size:22px;}
  .pay-tile span{font-size:12px; font-weight:800;}
  .card-fields{display:none; margin-top:8px;}
  .card-fields.visible{display:grid;}

  .checkout-actions{display:flex; justify-content:space-between; align-items:center; margin-top:30px; gap:14px;}
  .btn-back{
    font-weight:800; font-size:14px; color:var(--muted); display:flex; align-items:center; gap:6px; padding:12px 6px;
  }
  .btn-back:hover{color:var(--ink);}
  .btn-back svg{width:16px; height:16px;}
  .btn-next{
    padding:14px 28px; border-radius:999px; font-weight:800; font-size:14.5px;
    background:linear-gradient(120deg, var(--red), var(--pink)); color:#fff;
    box-shadow:0 10px 24px rgba(231,50,106,.3); display:inline-flex; align-items:center; gap:8px;
  }
  .btn-next:hover{transform:translateY(-1px);}
  .btn-next:disabled{opacity:.45; cursor:not-allowed; transform:none;}

  .checkout-side{position:sticky; top:94px;}
  .recap-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden;}
  .recap-head{padding:20px 22px 16px; border-bottom:1px dashed var(--line); display:flex; gap:14px; align-items:center;}
  .recap-thumb{width:44px; height:44px; border-radius:11px; background:linear-gradient(135deg,#F2A93B,#E7326A); display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;}
  .recap-head b{font-size:14px; font-weight:800; display:block;}
  .recap-head span{font-size:11.5px; color:var(--muted); font-weight:700;}
  .recap-lines{padding:14px 22px; display:flex; flex-direction:column; gap:10px;}
  .recap-line{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700;}
  .recap-line .rl-name{color:var(--ink);}
  .recap-line .rl-qty{color:var(--muted); font-weight:700;}
  .recap-foot{padding:16px 22px 22px; border-top:1px solid var(--line);}
  .rf-row{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); font-weight:700; margin-bottom:8px;}
  .rf-total{display:flex; justify-content:space-between; font-size:17px; font-weight:800; margin:12px 0 0; padding-top:12px; border-top:1px dashed var(--line);}

  .confirm-wrap{max-width:720px; margin:0 auto; padding:56px 0 90px; text-align:center;}
  .confirm-badge{
    width:78px; height:78px; border-radius:50%; margin:0 auto 22px;
    background:linear-gradient(135deg, var(--turq-dark), var(--turq));
    display:flex; align-items:center; justify-content:center; font-size:36px; color:#fff;
    box-shadow:0 14px 30px rgba(107,192,176,.35);
  }
  .confirm-wrap h2{font-size:28px; font-weight:800; margin-bottom:10px;}
  .confirm-wrap .sub{color:var(--muted); font-weight:600; font-size:14.5px; margin-bottom:6px;}
  .confirm-order{font-size:13px; color:var(--muted); font-weight:700; margin-bottom:34px;}
  .confirm-order b{color:var(--ink);}

  .ticket-stub{
    display:flex; text-align:left; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
    overflow:hidden; margin-bottom:14px; box-shadow:var(--shadow);
  }
  .stub-main{flex:1; padding:18px 20px; min-width:0;}
  .stub-main .sm-event{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--red); margin-bottom:4px;}
  .stub-main h4{font-size:15.5px; font-weight:800; margin-bottom:6px;}
  .stub-main .sm-meta{font-size:12px; color:var(--muted); font-weight:700;}
  .stub-qr{
    width:96px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
    border-left:2px dashed var(--line); background:var(--cream); position:relative;
  }
  .qr-box{
    width:56px; height:56px; border-radius:8px;
    background:
      linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px) repeat-x,
      linear-gradient(0deg, var(--ink) 0 4px, transparent 4px 8px) repeat-y,
      var(--paper);
    background-size:16px 16px, 16px 16px;
    border:2px solid var(--ink);
  }

  .confirm-actions{display:flex; gap:12px; justify-content:center; margin-top:30px; flex-wrap:wrap;}

  @media (max-width:1000px){
    .checkout-layout{grid-template-columns:1fr;}
    .checkout-side{position:static;}
    .pay-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:640px){
    .form-grid{grid-template-columns:1fr;}
    .form-group.full{grid-column:auto;}
    .step-line{width:16px;}
    .pay-grid{grid-template-columns:repeat(2,1fr);}
    .ticket-stub{flex-direction:column;}
    .stub-qr{width:100%; height:70px; border-left:none; border-top:2px dashed var(--line);}
  }


  /* ===== ALL EVENTS GRID VIEW ===== */
  .ae-header{
    padding:34px 0 22px; border-bottom:1px solid var(--line); background:var(--paper);
  }
  .ae-eyebrow{font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:8px; display:block;}
  .ae-header h1{font-size:clamp(24px,3.4vw,36px); font-weight:800; margin-bottom:6px;}
  .ae-header p{color:var(--muted); font-weight:600; font-size:14px;}
  .ae-toolbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    padding:18px 0; border-bottom:1px solid var(--line);
  }
  .ae-filters{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none;}
  .ae-filters::-webkit-scrollbar{display:none;}
  .ae-sort{
    display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; color:var(--muted); flex-shrink:0;
  }
  .ae-sort select{
    background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
    padding:9px 30px 9px 12px; font-family:'Manrope'; font-size:13px; font-weight:700; color:var(--ink);
    outline:none; cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238A8087' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position:right 10px center; background-repeat:no-repeat; background-size:1.1em;
  }
  .events-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:22px;
    padding:32px 0 8px;
  }
  .events-grid .card{width:100%;}
  .ae-loadmore{display:flex; justify-content:center; padding:36px 0 70px;}
  .ae-loadmore button{
    padding:13px 28px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper);
    font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:8px;
  }
  .ae-loadmore button:hover{border-color:var(--ink);}
  .ae-count{font-size:12.5px; color:var(--muted); font-weight:700; margin-top:10px;}


  /* ===== IMPLEMENTATION ADDITIONS =====
     Rules the static design mock-up did not need because every card used a gradient tile.
     The live directory renders the organizer's real event artwork when there is one, and it
     needs an honest empty state when a tenant has nothing on sale. */
  .card-media img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .card-media.has-image::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,.34) 100%);
  }
  .card-media .media-badge,
  .card-media .fav-btn,
  .card-media .tag-pill{z-index:2;}
  .card-link{display:block; color:inherit;}
  .events-empty{
    text-align:center; padding:72px 24px;
    border:1px dashed var(--line); border-radius:var(--r-lg);
    background:var(--paper); box-shadow:var(--shadow);
  }
  .events-empty h3{font-size:22px; font-weight:800; margin-bottom:8px;}
  .events-empty p{color:var(--muted); font-weight:600; font-size:14.5px;}

  /* ===== TENANT BRANDING =====
     The design hardcoded its own accent inside several rgba() shadows and tints, so those rules
     did not follow --red / --turq when a tenant's colours replaced them. They are re-declared here
     against --red-rgb / --turq-rgb, which EventDirectoryFacade stamps on :root alongside the
     palette. --on-primary / --on-secondary carry the readable text colour for whichever accent the
     tenant configured, so a pale brand colour does not end up with white text on it. */
  .btn-solid{
    color:var(--on-primary, #fff);
    box-shadow:0 10px 24px rgba(var(--red-rgb, 231,50,106), .30);
  }
  .btn-solid:hover{box-shadow:0 14px 30px rgba(var(--red-rgb, 231,50,106), .4);}
  .chip.active{
    color:var(--on-primary, #fff);
    box-shadow:0 6px 16px rgba(var(--red-rgb, 231,50,106), .35);
  }
  .tag-pill.selling{color:var(--on-primary, #fff);}
  .tag-pill.new{color:var(--on-secondary, #fff);}
  .tt-thumb{box-shadow:0 3px 8px rgba(var(--red-rgb, 231,50,106), .4);}
  html[data-theme="dark"] .tt-thumb{box-shadow:0 3px 8px rgba(var(--turq-rgb, 107,192,176), .4);}
  .hero-eyebrow{
    background:rgba(var(--turq-rgb, 107,192,176), .14);
    border-color:rgba(var(--turq-rgb, 107,192,176), .4);
  }
  .mini-tag{background:rgba(var(--turq-rgb, 107,192,176), .15);}

  /* Brand wordmark: the fallback when a tenant has configured no logo. Rendering another tenant's
     logo would be worse than rendering their name. */
  .brand-wordmark{
    font-family:'Outfit',sans-serif;
    font-weight:900; font-size:20px; letter-spacing:-0.02em;
    color:var(--ink); white-space:nowrap;
  }
  footer .brand-wordmark{color:#fff;}

  /* The footer sits on the design's black surface, and a tenant's large logo is usually drawn for
     a light background — DIZIZID's is dark ink on transparent, which disappears there. Rendering it
     as a white silhouette keeps whatever logo the tenant configured legible without needing a
     second, light-variant asset the platform does not store. */
  footer .foot-grid img{
    max-width:200px; object-fit:contain;
  }

  /* The hero's ambient glow and the search focus ring were painted with the design's own accent
     baked into rgba() literals, so they stayed pink on a tenant whose brand is red or teal — the
     one place on the page that visibly disagreed with the rest of the branding. Re-declared against
     the brand triplets. The card gradient tiles (.grad-1..8) are deliberately left alone: they are
     a fixed decorative set that gives adjacent event cards distinguishable artwork placeholders,
     not brand colour. */
  .hero::before{
    background:
      radial-gradient(60% 90% at 85% 10%, rgba(var(--red-rgb, 231,50,106), .55), transparent 60%),
      radial-gradient(45% 60% at 8% 90%, rgba(var(--turq-rgb, 107,192,176), .45), transparent 60%),
      radial-gradient(30% 40% at 55% 30%, rgba(var(--red-rgb, 231,50,106), .28), transparent 60%);
  }
  .search-shell:focus-within{box-shadow:0 0 0 4px rgba(var(--red-rgb, 231,50,106), .10);}

  /* ===== TYPOGRAPHY SYNCHRONISED WITH THE SHOP =====
     The shop is set in Roc Grotesk (self-hosted, /assets/fonts/rocGrotesk). The directory arrived
     from its mock-up set in Google's Outfit + Manrope, so moving from the directory to a shop page
     visibly changed typeface mid-journey. The same faces are declared here and put in front of the
     mock-up's fonts, which stay as the fallback — one product, one voice, and no dependency on
     fonts.googleapis.com for the primary render. */
  @font-face{font-family:"Roc Grotesk"; src:url("/assets/fonts/rocGrotesk/fonnts.com-Roc_Grotesk_Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap;}
  @font-face{font-family:"Roc Grotesk"; src:url("/assets/fonts/rocGrotesk/fonnts.com-Roc_Grotesk_Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap;}
  @font-face{font-family:"Roc Grotesk"; src:url("/assets/fonts/rocGrotesk/fonnts.com-Roc_Grotesk_Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap;}
  @font-face{font-family:"Roc Grotesk"; src:url("/assets/fonts/rocGrotesk/fonnts.com-Roc_Grotesk_Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap;}
  @font-face{font-family:"Roc Grotesk"; src:url("/assets/fonts/rocGrotesk/fonnts.com-Roc_Grotesk_ExtraBold.otf") format("opentype"); font-weight:800; font-style:normal; font-display:swap;}
  @font-face{font-family:"Roc Grotesk"; src:url("/assets/fonts/rocGrotesk/fonnts.com-Roc_Grotesk_Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap;}

  body{font-family:"Roc Grotesk", 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;}
  h1,h2,h3,h4,.display,.price,.org-badge,.lineup-time,.brand-wordmark{
    font-family:"Roc Grotesk", 'Outfit', system-ui, -apple-system, sans-serif;
  }
  .search-shell input,.filter-search input,.ae-sort select,.filter-select,.chip,.filter-pill{
    font-family:"Roc Grotesk", 'Manrope', system-ui, sans-serif;
  }

  /* ===== ACCENT USED AS TEXT ON THE LIGHT SURFACE =====
     These are the places the design tints TEXT with its accent. On the cream page a pale brand
     colour fails there long before it fails as a background, so they read the separately
     contrast-corrected --primary-on-light rather than the raw brand colour. */
  .tag,
  .see-all:hover,
  .ae-eyebrow,
  .pop-card .pop-badge,
  .stub-main .sm-event,
  .lineup-time,
  .mini-tag.low,
  .form-group label .req,
  .checkbox-row a{color:var(--primary-on-light, var(--red));}
  .see-all:hover{border-color:var(--primary-on-light, var(--red));}
  .mini-tag.low{background:rgba(var(--red-rgb, 231,50,106), .12);}
  .card-remaining{
    font-size:11.5px; font-weight:800; color:var(--primary-on-light, var(--red));
    text-transform:uppercase; letter-spacing:.03em;
  }
  .card.is-sold-out .card-media{filter:saturate(.35);}
  .card.is-sold-out h3{opacity:.8;}
  .tag-pill.soldout{background:#2A2429; color:#fff;}

  /* Keyboard users get the same affordance as pointer users. */
  .card-link:focus-visible,
  .chip:focus-visible,
  .filter-pill:focus-visible,
  .rail-arrow:focus-visible,
  .cat-tile:focus-visible,
  .see-all:focus-visible{
    outline:3px solid var(--primary-on-light, var(--red));
    outline-offset:3px;
  }

  /* ===== TENANT LOGO TONE =====
     The tone of the tenant's logo is measured at runtime (useLogoTone) because TenantSettings has
     no light-variant field. A dark-ink logo is flipped to a white silhouette wherever it would
     otherwise disappear — the black footer, and the dark theme's header. A logo that is already
     light is left alone in both themes. */
  .brand-logo{height:34px; width:auto; max-width:200px; object-fit:contain;}
  footer .brand-logo{height:30px; max-width:210px;}
  /* The logo keeps its own colours everywhere, including the footer. It used to be flattened to a
     white silhouette there, which threw away the brand. A dark-ink logo would vanish on the
     footer's black, so it gets a light plate to sit on instead — the mark stays exactly as the
     tenant drew it, and it is still legible. A logo that is already light needs neither. */
  .brand-logo.logo-ink-dark.on-dark,
  html[data-theme="dark"] .brand-logo.logo-ink-dark{
    background:#fff;
    border-radius:10px;
    padding:6px 10px;
  }
  html[data-theme="dark"] .brand-wordmark{color:var(--ink);}

  /* ===== HORIZONTAL RAILS — ARROWS, HOVER-SCROLL AND DRAG ===== */
  .rail-shell{position:relative;}
  .rail-shell .chip-track{scroll-behavior:auto;}
  .rail-shell .chip-track.is-dragging,
  .rail-shell .scroll-row.is-dragging{cursor:grabbing; scroll-behavior:auto; user-select:none;}
  .rail-shell .chip-track.is-dragging a,
  .rail-shell .scroll-row.is-dragging a{pointer-events:none;}
  .rail-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:var(--paper); border:1.5px solid var(--line);
    box-shadow:var(--shadow);
    display:flex; align-items:center; justify-content:center;
    z-index:5; opacity:1; transition:opacity .2s ease, transform .15s ease, border-color .15s ease;
  }
  .rail-arrow svg{width:18px; height:18px; color:var(--ink);}
  .rail-arrow:hover{border-color:var(--primary-on-light, var(--red)); transform:translateY(-50%) scale(1.06);}
  .rail-arrow.is-hidden{opacity:0; pointer-events:none;}
  .rail-arrow-left{left:-8px;}
  .rail-arrow-right{right:-8px;}
  /* No edge fade. The gradient veil over each end read as a white glow smeared across the row —
     Thuisbezorgd's rails simply end at the edge and let the next card be cut. */

  /* ===== FILTERS ===== */
  .filter-bar{
    background:var(--paper); border:1.5px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow); padding:16px 20px; margin:26px 0 4px;
  }
  .filter-bar-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
  .filter-toggle{
    display:none; align-items:center; gap:8px;
    padding:10px 16px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--cream); font-weight:800; font-size:13.5px; color:var(--ink);
  }
  .filter-toggle svg{width:16px; height:16px;}
  .filter-count{
    background:var(--red); color:var(--on-primary, #fff);
    border-radius:999px; min-width:20px; height:20px; padding:0 6px;
    display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:800;
  }
  .filter-result-count{font-weight:800; font-size:14px;}
  .filter-sort{margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--muted);}
  .filter-sort select,.filter-select{
    background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
    padding:9px 30px 9px 12px; font-size:13px; font-weight:700; color:var(--ink);
    outline:none; cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238A8087' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position:right 10px center; background-repeat:no-repeat; background-size:1.1em;
  }
  .filter-panel{
    display:flex; flex-wrap:wrap; gap:22px 28px; align-items:flex-end;
    padding-top:16px; margin-top:14px; border-top:1px dashed var(--line);
  }
  .filter-group{display:flex; flex-direction:column; gap:8px;}
  .filter-group-search{flex:1; min-width:220px;}
  .filter-label{font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
  .filter-options{display:flex; flex-wrap:wrap; gap:8px;}
  .filter-pill{
    padding:8px 14px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--cream); font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;
    transition:.15s;
  }
  .filter-pill:hover{border-color:var(--ink);}
  .filter-pill.is-active{
    background:linear-gradient(120deg, var(--red), var(--pink));
    color:var(--on-primary, #fff); border-color:transparent;
  }
  .filter-search{
    display:flex; align-items:center; gap:8px;
    background:var(--cream); border:1.5px solid var(--line); border-radius:999px;
    height:42px; padding:0 16px;
  }
  .filter-search:focus-within{border-color:var(--red);}
  .filter-search svg{width:16px; height:16px; color:var(--muted); flex-shrink:0;}
  .filter-search input{flex:1; border:none; outline:none; background:transparent; font-size:14px; font-weight:600; color:var(--ink);}
  .filter-check{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; cursor:pointer;}
  .filter-check input{width:16px; height:16px; accent-color:var(--red);}
  .filter-check-count{color:var(--muted); font-weight:700;}
  .filter-clear{
    margin-left:auto; align-self:flex-end;
    padding:9px 16px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--paper); font-size:13px; font-weight:800; color:var(--ink);
  }
  .filter-clear:hover{border-color:var(--red); color:var(--primary-on-light, var(--red));}
  .events-empty .btn-solid{margin-top:18px;}

  /* ===== DETAIL VIEW — THE EMBEDDED SHOP ===== */
  .hero-banner-image{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55;}
  .embed-section{padding:34px 0 70px;}
  .shop-embed{position:relative; margin-top:22px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow);}
  .shop-embed iframe{display:block; width:100%; border:0; min-height:640px;}
  .shop-embed-loading{
    position:absolute; inset:0; z-index:2;
    display:flex; align-items:center; justify-content:center; gap:12px;
    background:var(--paper); color:var(--muted); font-weight:700; font-size:14px;
  }
  .shop-embed.is-loaded .shop-embed-loading{display:none;}
  .shop-embed-spinner{
    width:18px; height:18px; border-radius:50%;
    border:2.5px solid var(--line); border-top-color:var(--red);
    animation:embed-spin .7s linear infinite;
  }
  @keyframes embed-spin{to{transform:rotate(360deg);}}

  /* ===== MOBILE =====
     The mock-up stopped caring below 520px, but this is a page people open on a phone while
     standing outside a venue. */
  @media (max-width:900px){
    .filter-toggle{display:inline-flex;}
    .filter-panel{display:none;}
    .filter-bar.is-open .filter-panel{display:flex;}
    .filter-sort{margin-left:0; width:100%;}
    .filter-sort select{flex:1;}
    .filter-clear{margin-left:0; width:100%;}
    .filter-group-search{width:100%; flex-basis:100%;}
  }
  @media (max-width:860px){
    .hero h1{font-size:clamp(30px, 8vw, 44px);}
    .hero-sub{font-size:15.5px;}
    .header-inner{gap:14px;}
    .search-shell{height:46px;}
    .rail-arrow{display:none;}
    .rail-shell.has-arrows::before,.rail-shell.has-arrows::after{display:none;}
    .facts-row{gap:18px;}
    .embed-section{padding:24px 0 48px;}
    .shop-embed iframe{min-height:560px;}
  }
  @media (max-width:640px){
    .wrap{padding:0 16px;}
    .events-grid{grid-template-columns:1fr; gap:16px;}
    .card{width:100%;}
    /* One card fills the phone width and the next peeks in, which is what makes a rail read as
       swipeable rather than as a cut-off grid. */
    .scroll-row .card{width:78vw; max-width:300px;}
    .hero{padding:32px 0 44px;}
    .hero-stats{flex-wrap:wrap; gap:20px 26px;}
    .hero-quick{flex-wrap:wrap;}
    .sec-head{flex-direction:column; align-items:flex-start; gap:10px;}
    .see-all{align-self:flex-start;}
    .filter-bar{padding:14px; border-radius:var(--r-md);}
    .utility-bar .wrap{height:auto; padding-top:6px; padding-bottom:6px;}
    .utility-right{display:none;}
    .foot-grid{grid-template-columns:1fr 1fr; gap:24px;}
    .foot-bottom{flex-direction:column; align-items:flex-start; gap:6px;}
    .ae-header h1{font-size:clamp(22px,7vw,30px);}
  }
  @media (max-width:420px){
    .cat-grid{grid-template-columns:repeat(2,1fr);}
    .scroll-row .card{width:84vw;}
    /* THE CTA STAYS ON A PHONE. It used to be the thing dropped when the header ran out of room,
       which left the smallest screens with no way to list an event short of scrolling to the footer.
       The dark-mode switch goes instead — it is a preference, and the CTA is the point of the page.
       Compact padding is what makes the row fit alongside the language and currency pickers. */
    .header-actions .theme-toggle{display:none;}
    .header-actions .btn-solid{padding:10px 14px; font-size:13px; white-space:nowrap;}
  }

  /* Anyone who has asked their system to reduce motion should not get hover-scrolling rails. */
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
    html{scroll-behavior:auto;}
  }

  /* ===== LANGUAGE + CURRENCY PICKERS =====
     The tenant's own active languages and currencies, the same lists the shop offers. Each picker
     hides itself when there is only one option, so a single-currency tenant gets no dead control. */
  .locale-pickers{display:flex; align-items:center; gap:8px;}
  .locale-picker select{
    background:var(--paper); border:1.5px solid var(--line); border-radius:999px;
    padding:8px 28px 8px 12px; font-size:12.5px; font-weight:800; color:var(--ink);
    outline:none; cursor:pointer; appearance:none;
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%238A8087' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position:right 8px center; background-repeat:no-repeat; background-size:1em;
    transition:border-color .15s ease;
  }
  .locale-picker select:hover{border-color:var(--ink);}
  .locale-picker select:focus-visible{outline:3px solid var(--primary-on-light, var(--red)); outline-offset:2px;}
  .locale-pickers.is-compact select{padding:7px 26px 7px 10px; font-size:12px;}
  @media (max-width:640px){
    .locale-pickers{gap:6px;}
    .locale-picker select{padding:7px 24px 7px 9px; font-size:11.5px;}
  }

  /* ===== CARD SIZE AND LAYOUT =====
     Cards were 296px, which on a 1360px page gave four cramped columns and left the artwork too
     small to tell events apart. Sized to the Thuisbezorgd overview instead: a three-up grid on a
     wide screen with 16px gutters, so a card lands around 400px and the image can actually carry
     the event. */
  .events-grid{
    grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
    gap:16px;
  }
  .card{width:340px;}
  .events-grid .card{width:100%;}
  .card-media{height:176px;}

  /* Date and time first, then venue and status together on one line. Venue truncates rather than
     pushing the status pill onto a second row. */
  .card-meta-venue{
    display:flex; align-items:center; gap:6px; min-width:0;
  }
  .card-meta-venue .venue-name{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  }
  .status-pill{
    flex-shrink:0;
    display:inline-flex; align-items:center;
    background:rgba(46,125,108,.14); color:#2E7D6C;
    border:1px solid rgba(46,125,108,.35);
    font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
    padding:3px 8px; border-radius:999px; white-space:nowrap;
  }
  html[data-theme="dark"] .status-pill{background:rgba(46,125,108,.22); color:#7FD8C2;}

  /* The times printed are the event's own local times. The marker says so on hover rather than
     appending a zone to every line. */
  .tz-info{
    display:inline-flex; align-items:center; justify-content:center;
    width:14px; height:14px; margin-left:4px; flex-shrink:0;
    border:1px solid var(--muted); border-radius:50%;
    font-size:9px; font-weight:800; font-style:italic; line-height:1;
    color:var(--muted); cursor:help;
  }

  /* ===== UTILITY BAR ===== */
  .utility-bar .wrap{height:16px; gap:16px;}
  .utility-bar{font-size:10.5px;}
  .utility-marquee-track{gap:18px; min-width:0; flex:1;}
  .utility-marquee-track span{white-space:nowrap;}
  .utility-right{flex-shrink:0; white-space:nowrap;}

  /* ===== DETAIL: TABS, TICKET LIST, CART ===== */
  .detail-tabs{
    display:flex; gap:8px; padding:22px 0 0; border-bottom:1px solid var(--line);
  }
  .detail-tab{
    padding:12px 20px; border-radius:12px 12px 0 0;
    font-size:14.5px; font-weight:800; color:var(--muted);
    border:1px solid transparent; border-bottom:none; background:none;
  }
  .detail-tab:hover{color:var(--ink);}
  .detail-tab.is-active{
    background:var(--paper); color:var(--ink);
    border-color:var(--line); margin-bottom:-1px;
  }
  .detail-layout{
    display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:34px;
    padding:30px 0 70px; align-items:start;
  }
  .detail-content{min-width:0;}
  .content-section{margin-bottom:34px;}
  .content-section h2{font-size:22px; font-weight:800; margin-bottom:8px;}
  .content-section .sub{font-size:13.5px; color:var(--muted); font-weight:600;}
  .about-text{font-size:15px; line-height:1.65; color:var(--ink); white-space:pre-line;}
  .ticket-list{display:flex; flex-direction:column; gap:12px; margin-top:16px;}
  .ticket-row{
    display:flex; align-items:center; gap:16px;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md);
    padding:16px 18px; box-shadow:var(--shadow);
  }
  .ticket-row-info{flex:1; min-width:0;}
  .ticket-row-info h4{font-size:15.5px; font-weight:800; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
  .ticket-row-info p{font-size:13px; color:var(--muted); font-weight:600; margin-top:4px; line-height:1.5;}
  .ticket-row-price{font-family:'Outfit'; font-weight:800; font-size:16px; flex-shrink:0;}
  .ticket-actions{flex-shrink:0;}
  .ticket-soldout{font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase;}
  .stepper{
    display:flex; align-items:center; gap:4px;
    border:1.5px solid var(--line); border-radius:999px; padding:3px; background:var(--cream);
  }
  .stepper button{
    width:30px; height:30px; border-radius:50%;
    font-size:17px; font-weight:800; line-height:1; color:var(--ink);
    background:var(--paper); border:1px solid var(--line);
  }
  .stepper button:hover:not(:disabled){border-color:var(--red); color:var(--primary-on-light, var(--red));}
  .stepper button:disabled{opacity:.35; cursor:not-allowed;}
  .stepper span{min-width:24px; text-align:center; font-weight:800; font-size:14px;}

  .cart-panel{
    position:sticky; top:94px;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow:var(--shadow); overflow:hidden;
  }
  .cart-head{padding:18px 20px; border-bottom:1px solid var(--line);}
  .cart-head h3{font-size:16px; font-weight:800;}
  .cart-head span{font-size:12.5px; color:var(--muted); font-weight:600; display:block; margin-top:2px;}
  .cart-empty{padding:34px 20px; text-align:center;}
  .cart-empty .ic{font-size:30px; margin-bottom:10px;}
  .cart-empty p{font-size:13px; color:var(--muted); font-weight:600; line-height:1.6;}
  /* The design toggled .cart-items/.cart-foot with a `.visible` class from its own script. React
     renders them only when there is something to show, so they are always displayed here — without
     this the footer (subtotal and the checkout button) inherited display:none and never appeared. */
  .cart-items{padding:12px 20px; display:flex !important; flex-direction:column; gap:12px;}
  .cart-item{display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .ci-info b{font-size:13.5px; font-weight:800; display:block;}
  .ci-info span{font-size:12px; color:var(--muted); font-weight:600;}
  .ci-total{font-family:'Outfit'; font-weight:800; font-size:14px; white-space:nowrap;}
  .cart-foot{padding:16px 20px 20px; border-top:1px dashed var(--line); display:block !important;}
  .cf-row{display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:8px;}
  .cf-total{display:flex; justify-content:space-between; font-family:'Outfit'; font-weight:800; font-size:18px; margin-bottom:10px;}
  .cf-note{font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.5; margin-bottom:14px;}
  .cf-checkout{
    width:100%; padding:14px; border-radius:999px;
    background:linear-gradient(120deg, var(--red), var(--pink));
    color:var(--on-primary, #fff); font-weight:800; font-size:14.5px;
    box-shadow:0 10px 24px rgba(var(--red-rgb, 231,50,106), .3);
  }
  .cf-checkout:hover{transform:translateY(-1px);}

  @media (max-width:1000px){
    .detail-layout{grid-template-columns:1fr;}
    .cart-panel{position:static;}
  }
  @media (max-width:640px){
    .card{width:100%;}
    .scroll-row .card{width:84vw; max-width:340px;}
    .events-grid{grid-template-columns:1fr;}
    .card-media{height:180px;}
    .ticket-row{flex-wrap:wrap; gap:12px;}
    .ticket-row-info{flex-basis:100%;}
    .detail-tab{padding:10px 14px; font-size:13.5px;}
  }

  /* ===== RAIL SCROLLING FIX =====
     The arrows moved nothing. The rails carry `scroll-snap-type: x proximity`, and snapping reverts
     any scroll smaller than its threshold — which is every frame of the hover-scroll (9px) and, in
     combination with `behavior: smooth`, the arrow paging too. Measured directly: assigning
     scrollLeft = 150 read back as 0, while an unsnapped scrollBy moved correctly.

     Snapping earns its place on touch, where it makes a swipe land cleanly on a card. The arrows
     only exist on pointer screens (they are hidden below 860px). So the two are split by the same
     breakpoint rather than one breaking the other. */
  @media (min-width:861px){
    .rail-shell .scroll-row,
    .rail-shell .chip-track{scroll-snap-type:none;}
  }

  /* ===== TYPOGRAPHY WEIGHT =====
     Roc Grotesk was put in front of the design's own faces to match the shop. It has no 600, so
     every `font-weight:600` in the design — 26 rules, most of the body copy — resolved up to 700,
     and the page read as uniformly bold. The design's Outfit/Manrope pairing carries the full
     weight range it was drawn for, so it goes back in front; Roc Grotesk stays as the fallback. */
  body{font-family:'Manrope', "Roc Grotesk", system-ui, -apple-system, sans-serif;}
  h1,h2,h3,h4,.display,.price,.org-badge,.lineup-time,.brand-wordmark,.ci-total,.ticket-row-price{
    font-family:'Outfit', "Roc Grotesk", system-ui, -apple-system, sans-serif;
  }
  .search-shell input,.filter-search input,.ae-sort select,.filter-select,.chip,.filter-pill{
    font-family:'Manrope', "Roc Grotesk", system-ui, sans-serif;
  }

  /* ===== ORGANIZER CHIPS — CLICK TO SEE THEIR EVENTS ===== */
  .org-chip{
    display:flex; align-items:center; gap:12px; flex-shrink:0;
    text-align:left; cursor:pointer;
    transition:border-color .15s ease, transform .15s ease;
  }
  .org-chip .org-chev{
    width:16px; height:16px; flex-shrink:0; color:var(--muted);
    transition:transform .2s ease;
  }
  .org-chip:hover{border-color:var(--ink);}
  .org-chip.is-expanded{border-color:var(--primary-on-light, var(--red));}
  .org-chip.is-expanded .org-chev{transform:rotate(180deg); color:var(--primary-on-light, var(--red));}
  .org-chip:focus-visible{outline:3px solid var(--primary-on-light, var(--red)); outline-offset:3px;}
  .org-events{padding-top:20px;}
  .rail-shell .org-row{scroll-behavior:auto;}
  @media (min-width:861px){ .rail-shell .org-row{scroll-snap-type:none;} }

  /* A rail is dragged with the mouse. Without this the browser starts its own drag on the card's
     link or image and the rail never moves. */
  .rail-shell .scroll-row,
  .rail-shell .chip-track,
  .rail-shell .org-row{cursor:grab;}
  .rail-shell .scroll-row a,
  .rail-shell .scroll-row img,
  .rail-shell .org-row button{-webkit-user-drag:none; user-select:none;}

  /* ===== TICKET ROW MEDIA + CHECKOUT HANDOFF ===== */
  .ticket-row-media{
    width:56px; height:56px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:24px;
  }
  .ticket-row-price{display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
  .ticket-row-price span{font-family:'Manrope'; font-size:11px; font-weight:700; color:var(--muted);}
  .cf-secure{
    margin-top:10px; text-align:center;
    font-size:11px; font-weight:700; color:var(--muted);
  }
  .checkout-back{margin-bottom:18px;}
  @media (max-width:640px){ .ticket-row-media{display:none;} }

  /* ===== EMBEDDED SHOP: KEEP ITS OVERLAYS INSIDE THE PAGE =====
     The shop's own loading screen is a full-viewport overlay (fixed, inset 0, z-index 2147483000),
     which is right when the shop owns the page and wrong when it is mounted inside one — continuing
     from the basket made the whole events page disappear behind it. Embedded, the wait renders in
     the flow's own box. */
  .shop-inline-loading{
    display:flex; align-items:center; justify-content:center;
    min-height:320px; width:100%;
    background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  }
  .shop-inline-spinner{
    width:26px; height:26px; border-radius:50%;
    border:3px solid var(--line); border-top-color:var(--red);
    animation:embed-spin .7s linear infinite;
  }
  /* A new stacking context, so anything else the flow positions absolutely stays within it. */
  .inline-shop-flow{position:relative; z-index:0;}

  /* ===== HERO HEADLINE =====
     The headline is the tenant's own slogan ("Any Moment. Any Event. Any Time"). At the mock-up's
     size — up to 74px, drawn for a two-line question — a slogan broke across lines mid-sentence.
     Smaller, and kept on one line where there is room; it still wraps on a phone, where forcing one
     line would push it off the screen. */
  .hero h1{font-size:clamp(26px, 3.4vw, 44px); line-height:1.1;}
  @media (min-width:861px){
    .hero h1{white-space:nowrap;}
  }

  /* ===== TYPE SCALE & VERTICAL RHYTHM (Thuisbezorgd) =====
     The page was drawn on its own scale: 34px section headings, 56px section padding, 92px under
     the hero. Next to Thuisbezorgd it reads loud and loose. Their scale is small and strict —
     headings 24/28px on a 28/32px line, body 16/24, small 14/20 — on a 4px spacing rhythm
     (4, 8, 12, 16, 24, 32, 40, 56). Everything below moves onto that scale.

     Sizes step up once at 861px, matching their narrow/wide split, rather than sliding on vw:
     a clamp() on viewport width is what made headings drift to sizes the scale does not contain. */

  /* ---------- HERO ---------- */
  .hero{padding:40px 0 56px;}
  .hero-eyebrow{font-size:12px; margin-bottom:16px; padding:6px 12px;}
  .hero h1{font-size:26px; line-height:1.12;}
  .hero-sub{margin-top:12px; font-size:16px; line-height:24px;}
  .hero-quick{margin-top:24px;}
  .qbtn{font-size:14px; line-height:20px; padding:10px 16px;}
  .hero-stats{margin-top:32px; gap:32px;}
  .hero-stats .stat b{font-size:24px; line-height:28px;}
  .hero-stats .stat span{font-size:14px; line-height:20px;}

  /* ---------- SECTIONS ---------- */
  .section{padding:40px 0;}
  .section.tight{padding:32px 0;}
  .sec-head{margin-bottom:16px; gap:16px;}
  .sec-head .tag{font-size:12px; line-height:16px; margin-bottom:4px;}
  .sec-head h2{font-size:20px; line-height:24px;}
  .sec-head p{font-size:14px; line-height:20px; margin-top:4px;}
  .see-all{font-size:14px; line-height:20px; padding:8px 14px;}

  /* ---------- CARDS ---------- */
  .card-body{padding:8px 12px 12px;}
  .card-body h3{font-size:16px; line-height:20px; margin-bottom:4px;}
  .card-meta{font-size:14px; line-height:20px; margin-bottom:2px;}
  .card-foot{padding-top:8px;}
  .price{font-size:16px; line-height:20px;}
  .price span{font-size:12px; line-height:16px;}

  /* ---------- CATEGORY TILES ---------- */
  .cat-tile .ic{font-size:24px; margin-bottom:8px;}
  .cat-tile .lb{font-size:14px; line-height:20px;}
  .cat-tile .ct{font-size:12px; line-height:16px; margin-top:2px;}

  .events-empty h3{font-size:20px; line-height:24px; margin-bottom:4px;}
  .events-empty p{font-size:14px; line-height:20px;}

  /* At the wide breakpoint the two headings step up one stop — 28/32 for the hero, 24/28 for a
     section — which is the only size change between their narrow and wide layouts. */
  @media (min-width:861px){
    .hero h1{font-size:32px; line-height:36px;}
    .sec-head h2{font-size:24px; line-height:28px;}
  }

  @media (max-width:860px){
    .hero{padding:32px 0 40px;}
    .hero-stats{margin-top:24px; gap:16px 32px;}
    .section{padding:32px 0;}
    .section.tight{padding:24px 0;}
  }

  /* The tile's label and count are two lines, not a sentence. The mock-up's rules left them inline,
     so at the smaller sizes above they closed up into "Latin12 evenementen". */
  .cat-tile .lb,
  .cat-tile .ct{display:block;}

  /* ===== CHECKOUT INSIDE THE DETAIL PAGE =====
     Checkout used to replace the page: the ticket list and the basket panel disappeared and the
     buyer was left looking at a form with no idea what they were buying. The two-column layout now
     stays put — the basket panel keeps showing the lines and the total the whole way through — and
     only the LEFT column swaps from the ticket list to the flow's current step. */

  .checkout-stage{padding-top:4px;}
  .checkout-back{margin-bottom:16px;}

  /* The step rail. Horizontal, in the page's own styling, replacing the flow's Bootstrap pills. */
  .checkout-steps{
    display:flex; align-items:center; gap:8px;
    list-style:none; margin:0 0 24px; padding:0;
  }
  .checkout-step{
    display:flex; align-items:center; gap:8px;
    flex:1; min-width:0;
    font-size:14px; line-height:20px; font-weight:700;
    color:var(--muted);
  }
  .checkout-step + .checkout-step::before{
    content:""; flex:1; height:2px; border-radius:2px;
    background:var(--line); margin-right:8px;
  }
  .checkout-step .cs-dot{
    display:grid; place-items:center; flex-shrink:0;
    width:26px; height:26px; border-radius:50%;
    background:var(--paper); border:1.5px solid var(--line);
    font-size:12px; line-height:1; font-weight:800;
  }
  .checkout-step .cs-label{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .checkout-step.current{color:var(--ink);}
  .checkout-step.current .cs-dot{background:var(--red); border-color:transparent; color:#fff;}
  .checkout-step.done{color:var(--ink);}
  .checkout-step.done .cs-dot{background:var(--turq); border-color:transparent; color:#fff;}
  .checkout-step.done + .checkout-step::before,
  .checkout-step.current + .checkout-step::before{background:var(--line);}

  /* The flow now sits in a column, not the full page width. Its own card chrome would be a second
     card inside the page's, so it is flattened; the page supplies the surface. */
  .checkout-stage .inline-shop-flow .shop-container{
    width:100%; max-width:none; padding:0; margin:0;
    background:transparent; box-shadow:none; border:none;
  }
  .checkout-stage .inline-shop-flow .screen-content{padding:0;}

  @media (max-width:720px){
    .checkout-steps{gap:4px;}
    .checkout-step .cs-label{display:none;}
    .checkout-step.current .cs-label{display:block;}
  }

  /* The footer columns were named col-1..col-4, which are Bootstrap grid classes. Harmless until
     the detail page started loading Bootstrap for the embedded flow — then each column collapsed
     to 8-33% of the row and every link wrapped mid-phrase. Renamed, and pinned here so a future
     stylesheet cannot claim them back. */
  .foot-grid .foot-col{width:auto; max-width:none; flex:initial; padding:0;}

  /* ONE TOTAL, NOT TWO. The basket panel on the right shows the lines, the fee and the total for
     the whole checkout, so the flow's own footer total is the same number printed twice a few
     centimetres apart. Its Back/Next stay — those are the flow's controls, not decoration. */
  .checkout-stage .inline-shop-flow .gand-total{display:none;}
  /* The flow sets display:flex inline on that row, so the rule has to outrank an inline style. */
  .checkout-stage .inline-shop-flow div:has(> .gand-total){display:none !important;}

  /* The flow's buttons in the page's own button styling. */
  .checkout-stage .inline-shop-flow .next-button,
  .checkout-stage .inline-shop-flow .back-button{
    font-size:14px; line-height:20px; font-weight:800;
    padding:11px 22px; border-radius:999px; border:1.5px solid transparent;
    transition:.15s;
  }
  .checkout-stage .inline-shop-flow .next-button{
    background:var(--red); color:#fff;
  }
  .checkout-stage .inline-shop-flow .next-button:hover:not(:disabled){filter:brightness(1.08);}
  .checkout-stage .inline-shop-flow .back-button{
    background:var(--paper); color:var(--ink); border-color:var(--line);
  }
  .checkout-stage .inline-shop-flow .back-button:hover{border-color:var(--red); color:var(--red);}

  /* ===== GALLERY STRIP, DETAILS OVERLAY, FLOW ACTIONS IN THE BASKET ===== */

  /* Where the "Organized by" strip used to be. The organizer is one of the facts below, so that
     strip printed the same name twice a few pixels apart. */
  .gallery-strip{background:var(--paper); border-bottom:1px solid var(--line);}
  .gallery-row{display:flex; gap:8px; padding:12px 0; overflow-x:auto; scrollbar-width:none;}
  .gallery-row::-webkit-scrollbar{display:none;}
  .gallery-thumb{
    flex:0 0 auto; width:96px; height:64px; padding:0;
    border:2px solid transparent; border-radius:var(--r-sm); overflow:hidden;
    background:var(--cream); cursor:pointer; transition:.15s;
  }
  .gallery-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .gallery-thumb:hover{border-color:var(--line);}
  .gallery-thumb.active{border-color:var(--red);}

  /* "More details" sits among the facts, as one of them, because it belongs with the venue and
     the date rather than above the tickets. */
  .fact-action{
    display:flex; align-items:center; gap:12px;
    background:none; border:none; padding:0; text-align:left; cursor:pointer; font:inherit;
  }
  .fact-action .v{color:var(--red);}
  .fact-action:hover .v{text-decoration:underline;}

  .details-overlay{
    position:fixed; inset:0; z-index:1200;
    background:rgba(0,0,0,.55);
    display:flex; align-items:center; justify-content:center;
    padding:24px;
  }
  .details-modal{
    background:var(--paper); border-radius:var(--r-lg);
    width:min(1100px, 100%); max-height:88vh;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 24px 64px rgba(0,0,0,.35);
  }
  .dm-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:20px 24px; border-bottom:1px solid var(--line);
  }
  .dm-head h2{font-size:20px; line-height:24px;}
  .dm-close{
    flex-shrink:0; width:32px; height:32px; border-radius:50%;
    border:1.5px solid var(--line); background:var(--paper); cursor:pointer;
    font-size:14px; line-height:1;
  }
  .dm-close:hover{border-color:var(--red); color:var(--red);}
  .dm-body{padding:24px; overflow-y:auto;}
  /* Wide, as asked: the gallery is the reason to open this. */
  .dm-gallery{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:12px; margin-bottom:24px;
  }
  .dm-gallery img{width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:var(--r-sm); display:block;}
  .dm-text h3{font-size:16px; line-height:20px; margin-bottom:8px;}
  .dm-text p{font-size:14px; line-height:22px; color:var(--muted); white-space:pre-line;}

  /* The flow's Back/Next and its expiry timer, rendered into the basket panel under the total. */
  .cf-flow-actions{margin-top:12px;}
  .cf-flow-actions .flow-actions-timer{display:flex; justify-content:center; margin-bottom:10px;}
  .cf-flow-actions .flow-actions-buttons{flex-direction:row-reverse; justify-content:stretch;}
  .cf-flow-actions .flow-actions-buttons > *{flex:1;}
  .cf-flow-actions .next-button,
  .cf-flow-actions .back-button{
    width:100%; font-size:14px; line-height:20px; font-weight:800;
    padding:12px 18px; border-radius:999px; border:1.5px solid transparent; transition:.15s;
  }
  .cf-flow-actions .next-button{background:var(--red); color:#fff;}
  .cf-flow-actions .next-button:hover:not(:disabled){filter:brightness(1.08);}
  .cf-flow-actions .back-button{background:var(--paper); color:var(--ink); border-color:var(--line);}
  .cf-flow-actions .back-button:hover{border-color:var(--red); color:var(--red);}
  /* The footer keeps the flow's other messages; its buttons and timer now live in the basket. */
  .checkout-stage .inline-shop-flow .total-placeholder{display:none;}

  /* Bigger footer logo. */
  footer .brand-logo{max-height:64px; width:auto;}

  @media (max-width:720px){
    .details-overlay{padding:0;}
    .details-modal{max-height:100vh; border-radius:0; width:100%;}
    .dm-gallery{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));}
  }

  /* The flow's own total, rendered into the basket panel during checkout. Matches .cf-total, since
     it is standing in for it. */
  .cf-flow-actions .flow-actions-total{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:10px; margin-bottom:12px;
    border-top:1px solid var(--line);
    font-family:'Outfit'; font-weight:800; font-size:16px; line-height:22px;
  }

  /* ===== NO FLASH OF THE NO-SCRIPT LIST =====
     #EventsCalendar ships a plain list of every event so the page works without JavaScript and so a
     crawler that does not run scripts still sees the catalogue. It was also PAINTED on every normal
     visit — a full-width column of bare rows — and then thrown away the moment React mounted. That
     was the flash. Hidden by default; the <noscript> block in the view turns it back on for the
     visitors it was written for. */
  .ssr-fallback{display:none;}

  /* ===== THE HOVER LIFT MUST NOT BE CLIPPED =====
     A card rises 5px and takes a larger shadow on hover, but .scroll-row is a horizontal scroll
     container — and overflow-x:auto clips the Y axis too. The lift and the shadow were being cut
     off against the row's edges, which read as a band of background behind the card.
     Room above and below, pulled back out with margin so nothing moves. */
  .scroll-row{
    padding-top:10px; padding-bottom:18px;
    margin-top:-10px; margin-bottom:-18px;
  }

  /* ===== TITLE TO CARDS =====
     55% tighter, as asked: the heading and the row it introduces belong together. */
  .sec-head{margin-bottom:7px;}

  /* ===== MOBILE, FOLLOWING THUISBEZORGD =====
     Their scale is mobile-first with one step at 721px and another at 1025px, 16px page gutters and
     a 16px rhythm between blocks on a phone. Ours had 20px gutters and desktop-sized controls that
     fell below a comfortable touch target — the language and currency pickers were 28px tall, the
     footer links 19px. */

  @media (max-width:720px){
    .wrap{padding:0 16px;}

    /* The header carries brand, pickers, theme and search on a phone. Its own row stays compact and
       the search sits under it, full width, rather than all four competing on one line. */
    .header-inner{padding:10px 0; gap:10px;}
    .header-inner .search-shell{order:5; flex:1 0 100%; height:44px;}

    /* 44px is the smallest target that can be hit reliably with a thumb. These were 28. */
    .locale-picker select{min-height:44px; padding:0 26px 0 12px; font-size:14px;}
    .theme-toggle{min-height:44px;}
    .search-go{min-height:40px;}
    .chip{padding:12px 18px;}
    .qbtn{min-height:44px;}

    /* A footer link at 19px tall is a coin-toss to tap. */
    footer .foot-col a{display:inline-block; padding:8px 0; min-height:24px;}

    /* Their 16px block rhythm. */
    .section, .section.tight{padding:24px 0;}
    .sec-head{margin-bottom:8px;}
    .cat-grid{gap:12px;}
    .scroll-row{gap:12px;}

    /* The marquee is decoration; on a phone it is decoration that costs a whole row of screen. */
    .utility-bar .utility-marquee-track{display:none;}
    .utility-bar .wrap{justify-content:flex-end;}
  }

  /* The rail sits under the hero now, so it needs its own separation from the section below it
     rather than borrowing the header's. */
  .chip-rail{border-top:1px solid var(--line);}

  /* ===== HERO BACKGROUND VIDEO =====
     Same treatment as academy.adricwalter.com: the video fills the section, a veil sits over it so
     the headline stays readable on any frame, and the hero's own radial gradient stays on top of
     both as the brand layer. Only drawn when the tenant has configured a video. */
  .hero.has-video .hero-video{
    position:absolute; inset:0; z-index:0;
    overflow:hidden; pointer-events:none;
    background:var(--black);
  }
  .hero.has-video .hero-video iframe{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    /* Cover, not contain: 16:9 sized off whichever axis is the constraint, so there are never
       letterbox bars beside the copy. */
    width:100vw; height:56.25vw;
    min-width:177.78vh; min-height:100%;
    border:0; pointer-events:none;
  }
  .hero.has-video .hero-veil{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(180deg, rgba(8,9,10,.62) 0%, rgba(8,9,10,.42) 45%, rgba(8,9,10,.82) 100%);
  }
  /* The brand gradient rides above the veil, softened so it tints the footage instead of hiding it. */
  .hero.has-video::before{z-index:2; opacity:.55;}
  .hero.has-video .hero-inner{position:relative; z-index:3;}
  .hero.has-video .hero-stats{position:relative; z-index:3;}

  @media (prefers-reduced-motion:reduce){
    .hero.has-video .hero-video{display:none;}
  }

  /* The venue's map, and the "On Sale Now" label with its start time underneath. */
  .dm-map{height:min(70vh, 620px); background:var(--cream);}
  .dm-map iframe{width:100%; height:100%; border:0; display:block;}
  .dm-map-foot{padding:14px 24px; border-top:1px solid var(--line); text-align:right;}
  .dm-map-foot a{font-size:14px; font-weight:800; color:var(--red);}
  .details-modal.map-modal .dm-body{padding:0;}

  .card-meta .start-stack{display:flex; flex-direction:column; line-height:1.25;}
  .card-meta .start-stack b{font-weight:800; color:var(--ink);}
  .card-meta .start-stack span{font-size:12px; color:var(--muted);}

  /* A popup is dragged by its header. The hint is on the header, not the panel, because that is the
     only part that moves it — the body still selects, scrolls and pans as normal. */
  .dm-head{user-select:none;}
  .details-modal.is-dragging{
    /* No transition while dragging, or the panel lags a frame behind the pointer. */
    transition:none;
    box-shadow:0 32px 80px rgba(0,0,0,.45);
  }
  /* An iframe swallows pointer events, so a drag that crosses the map would stall on it. */
  .details-modal.is-dragging iframe{pointer-events:none;}

  /* Title to cards halved again (7px -> 4px), and the gap between cards down to the 3px asked for.
     The rows keep their vertical padding: that is what stops the hover lift being clipped. */
  .sec-head{margin-bottom:4px;}
  .scroll-row{gap:3px;}
  .events-grid{column-gap:3px;}
  .cat-grid{column-gap:3px;}
  @media (max-width:720px){
    .sec-head{margin-bottom:4px;}
    .scroll-row{gap:3px;}
  }

  /* The gallery strip scrolls like every other rail on the page — arrows, wheel and drag — rather
     than only responding to a trackpad swipe. */
  .gallery-strip .rail-shell{position:relative;}
  .gallery-row{cursor:grab;}
  .gallery-row.is-dragging{cursor:grabbing; user-select:none;}
  .gallery-row.is-dragging img{pointer-events:none;}

  /* ===== CARD HOVER: A GLOW, NOT A MOVE =====
     The card used to rise 5px and take a heavier shadow. Two problems with that: it reflows nothing
     but LOOKS like it does, and the lift had to be given room inside a horizontal scroll container
     that clips its own overflow — which is why the shadow kept being cut off.

     A glow needs no room. The card stays exactly where it is, and the tenant's own primary colour
     is used, so the highlight is the brand's rather than a generic grey. --red-rgb is that colour as
     a triplet, stamped server-side, which is what makes the alpha possible. */
  .card{transition:box-shadow .18s ease, border-color .18s ease;}
  .card:hover{
    transform:none;
    border-color:rgba(var(--red-rgb), .55);
    box-shadow:
      0 0 0 1px rgba(var(--red-rgb), .35),
      0 0 22px rgba(var(--red-rgb), .28),
      var(--shadow);
  }

  /* Gap between cards as asked. */
  .scroll-row{gap:5px;}
  .events-grid{column-gap:5px;}
  .cat-grid{column-gap:5px;}

  /* Nothing overflows the row any more, so it no longer needs the space the lift required. A little
     is kept so the glow is not shaved against the row's edge. */
  .scroll-row{padding-top:6px; padding-bottom:10px; margin-top:-6px; margin-bottom:-10px;}

  /* The same treatment for the other hoverable tiles, so one interaction reads across the page. */
  .cat-tile:hover,
  .org-chip:hover{
    transform:none;
    border-color:rgba(var(--red-rgb), .55);
    box-shadow:0 0 0 1px rgba(var(--red-rgb), .35), 0 0 18px rgba(var(--red-rgb), .24);
  }

  /* ===== CARDS ON THE FIRST SCREEN =====
     Removing the category-tile grid was the first half. The second half is what still sat above the
     cards: the hero was 488px on a laptop and 648px on a phone, so the first row of cards started at
     674px and 826px — 18 visible pixels on a phone, which is not "visible" by any useful measure.

     Measured, not guessed: hero padding and the first section's top padding come down, and on a
     phone the hero's three stat counters go. The eyebrow directly above them already says how many
     events are on sale, so they were the same fact a second time, costing ~130px of the only screen
     that matters. */
  .hero{padding:28px 0 32px;}
  .hero-eyebrow{margin-bottom:12px;}
  .hero-sub{margin-top:10px;}
  .hero-quick{margin-top:18px;}
  .hero-stats{margin-top:22px;}

  /* The first section leads straight into cards; it does not need a full section's air above it. */
  .chip-rail + main.wrap > .section:first-child,
  main.wrap > .section:first-child{padding-top:16px;}

  @media (max-width:720px){
    .hero{padding:20px 0 24px;}
    .hero-stats{display:none;}
    main.wrap > .section:first-child{padding-top:12px;}
  }

  /* The gallery lightbox: the image is the only thing on screen, which is the point of opening it. */
  .details-modal.lightbox-modal{width:min(1200px,100%);}
  .lb-stage{
    position:relative; background:#0b0a0f;
    display:flex; align-items:center; justify-content:center;
    height:min(72vh, 680px);
  }
  .lb-stage img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
  .lb-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    border:none; background:rgba(255,255,255,.9); color:#111;
    font-size:26px; line-height:1; cursor:pointer;
    display:grid; place-items:center;
  }
  .lb-nav:hover{background:#fff;}
  .lb-nav.prev{left:12px;}
  .lb-nav.next{right:12px;}
  .lb-strip{
    display:flex; gap:6px; padding:12px 16px; overflow-x:auto;
    border-top:1px solid var(--line); background:var(--paper);
    scrollbar-width:none;
  }
  .lb-strip::-webkit-scrollbar{display:none;}
  .lb-thumb{
    flex:0 0 auto; width:72px; height:48px; padding:0; overflow:hidden;
    border:2px solid transparent; border-radius:var(--r-sm); background:var(--cream); cursor:pointer;
  }
  .lb-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .lb-thumb.active{border-color:var(--red);}
  /* The strip is inside a draggable panel; the drag must not start on a thumbnail. */
  .lb-strip img{-webkit-user-drag:none;}

  /* ===== HERO VIDEO: KEEP 16:9 =====
     Measured, the iframe was rendering at 1.98:1 on a laptop and 5.19:1 on a phone — nowhere near
     16:9 — so the picture was stretched and mis-framed rather than merely cropped.
     The cause was min-width:177.78vh: it forced the WIDTH from the viewport's height while the
     height was set independently, and the two stopped agreeing once the hero became shorter than the
     viewport.

     Width drives it now and aspect-ratio holds the shape, so the video is always 16:9 and the
     overflow is cropped evenly top and bottom, which is what a background video should do. */
  .hero.has-video .hero-video iframe{
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:100%; height:auto; aspect-ratio:16/9;
    min-width:0; min-height:0;
    border:0; pointer-events:none;
  }
  @media (max-width:720px){
    /* A phone hero is TALLER than 16:9 (390x289 measured), so a width-driven video would letterbox
       instead of cover. Scaled up to fill it, generously enough to hold as the copy grows. */
    .hero.has-video .hero-video iframe{transform:translate(-50%,-50%) scale(1.7);}
  }

  /* ===== SMALLER CARDS ===== */
  .card{width:300px;}
  .card-media{height:150px;}
  @media (max-width:860px){
    .scroll-row .card{width:74vw; max-width:300px;}
  }

  /* ===== FAVOURITE =====
     Top-right of the artwork. Its own button inside the card's link, so clicking the heart must not
     also open the event — hence the stopPropagation in the handler. */
  .fav-btn{
    position:absolute; top:8px; right:8px; z-index:3;
    width:34px; height:34px; border-radius:50%;
    border:none; cursor:pointer; padding:0;
    display:grid; place-items:center;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(4px);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
    transition:transform .15s ease, background .15s ease;
    font-size:16px; line-height:1;
  }
  .fav-btn:hover{background:#fff; transform:scale(1.08);}
  .fav-btn svg{width:18px; height:18px; display:block;}
  /* Outline until it is a favourite, then filled in the tenant's own colour. */
  .fav-btn svg{fill:none; stroke:#15121a; stroke-width:2;}
  .fav-btn.is-favourite svg{fill:rgb(var(--red-rgb)); stroke:rgb(var(--red-rgb));}
  .fav-btn:focus-visible{outline:2px solid rgb(var(--red-rgb)); outline-offset:2px;}

  /* ===== SHOW THE TOP OF A PICTURE =====
     object-fit:cover crops from the CENTRE by default, so a poster or flyer — where the act's name
     and the artwork sit in the upper third — lost exactly the part worth seeing. Anchored to the top
     instead: what gets cropped is the bottom, which on event artwork is usually the venue small
     print. */
  .hero-banner-image,
  .gallery-thumb img,
  .dm-gallery img,
  .lb-thumb img{object-position:center top;}

  /* The overlay's pictures are buttons now — they open the full-size gallery. */
  .dm-gallery-item{
    padding:0; border:none; background:none; cursor:zoom-in; display:block;
    border-radius:var(--r-sm); overflow:hidden;
  }
  .dm-gallery-item:hover img{transform:scale(1.03);}
  .dm-gallery-item img{transition:transform .2s ease;}
  .dm-gallery-item:focus-visible{outline:2px solid rgb(var(--red-rgb)); outline-offset:2px;}

  /* ===== FILTERS AS A POPUP =====
     The filter box used to expand inline and push the results down the page, so opening the filters
     hid the thing being filtered. It is a popup now, draggable by its header, so the grid behind it
     stays visible while choices are made — and it closes on a single "show results" press. */
  .filter-overlay{align-items:flex-start; padding-top:6vh;}
  .details-modal.filter-modal{width:min(720px,100%); max-height:86vh;}
  .filter-modal .filter-panel{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
    gap:16px; padding:20px 24px; overflow-y:auto;
  }
  .filter-modal .filter-group-search{grid-column:1 / -1;}
  .filter-modal .filter-clear{grid-column:1 / -1; justify-self:start;}
  .filter-modal-foot{
    padding:14px 24px; border-top:1px solid var(--line);
    background:var(--paper); position:sticky; bottom:0;
  }
  .filter-apply{
    width:100%; border:none; border-radius:999px; cursor:pointer;
    background:rgb(var(--red-rgb)); color:#fff;
    font-size:14px; line-height:20px; font-weight:800; padding:13px 20px;
  }
  .filter-apply:hover{filter:brightness(1.08);}

  /* The trigger reads as a filter icon first; the word is secondary and drops on a phone. */
  .filter-toggle svg{width:18px; height:18px;}
  @media (max-width:520px){
    .filter-toggle{gap:0;}
    .filter-toggle svg{margin:0;}
  }

  /* THE TRIGGER MUST EXIST AT EVERY WIDTH.
     It was display:none above 900px and only shown on a phone — correct while the panel was inline
     and always visible on desktop. Moving the panel into a popup made that rule a bug: the popup's
     only trigger was hidden, so a desktop visitor had no way to filter at all. */
  .filter-toggle{display:inline-flex !important;}

  /* TRENDING shouts. Uppercased in CSS rather than in the string, so translations stay intact and a
     screen reader still reads words rather than letters. Letter-spacing because caps set tight are
     harder to read than lowercase set tight. */
  .sec-head h2.is-trending{
    text-transform:uppercase;
    letter-spacing:.02em;
    display:flex; align-items:center; gap:8px;
  }
  .trending-flame{font-size:0.9em; line-height:1;}

  /* "HOT" with its flame, on the card and in the detail hero. Verbatim in every language, like the
     other short labels — a three-letter word that reads the same everywhere is clearer than three
     different translations of "selling fast". */
  .tag-pill.selling{display:inline-flex; align-items:center; gap:4px;}
  .pill-flame{font-size:0.95em; line-height:1;}

  /* ===== THE VIDEO SHOWS ITS TOP =====
     Fixing the aspect ratio made the crop even — 241px off the top AND the bottom — which is correct
     "cover" behaviour and still not what was asked for twice. A 16:9 video in a short hero has to
     lose height somewhere; it now loses it from the BOTTOM, exactly as the event artwork does.
     Anchored at top:0 instead of centred, with the scale on a phone growing downward from the top
     edge rather than outward from the middle. */
  .hero.has-video .hero-video iframe{
    top:0;
    transform:translateX(-50%);
    transform-origin:top center;
  }
  @media (max-width:720px){
    .hero.has-video .hero-video iframe{transform:translateX(-50%) scale(1.7);}
  }

  /* ===== FAVOURITES IN THE HEADER =====
     Between the currency picker and the theme toggle. Outline while empty, filled red once something
     is saved, so the header answers "is there anything to come back to" without a number to read. */
  .fav-header{
    position:relative; flex-shrink:0;
    width:38px; height:38px; border-radius:50%;
    border:1.5px solid var(--line); background:var(--paper);
    cursor:pointer; padding:0; display:grid; place-items:center;
    transition:.15s;
  }
  .fav-header svg{width:19px; height:19px; fill:none; stroke:var(--ink); stroke-width:2;}
  .fav-header:hover{border-color:var(--red); }
  .fav-header.is-active svg{fill:var(--red); stroke:var(--red);}
  .fav-header-count{
    position:absolute; top:-4px; right:-4px;
    min-width:18px; height:18px; padding:0 4px; border-radius:999px;
    background:var(--red); color:#fff;
    font-size:11px; font-weight:800; line-height:18px; text-align:center;
  }
  .details-modal.favourites-modal{width:min(1100px,100%);}
  .favourites-modal .dm-head h2{display:flex; align-items:center; gap:10px;}
  .fav-modal-count{font-size:13px; font-weight:700; color:var(--muted); text-transform:none; letter-spacing:0;}
  .favourites-modal .events-grid{grid-template-columns:repeat(auto-fill, minmax(260px,1fr));}
  .favourites-modal .events-empty .ic{font-size:34px; margin-bottom:10px;}

  /* ===== VIEW TOGGLE — cards or agenda =====
     Sits on the section heading's own line, right-aligned beside the title. Segmented rather than a
     single button, because a lone toggle never says which state it is in. */
  .view-toggle{
    display:inline-flex; flex-shrink:0; margin-left:auto;
    border:1.5px solid var(--line); border-radius:999px; overflow:hidden; background:var(--paper);
  }
  .vt-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border:none; background:none; cursor:pointer;
    font-size:13px; font-weight:800; color:var(--muted);
    transition:.15s;
  }
  .vt-btn svg{width:16px; height:16px;}
  .vt-btn:hover{color:var(--ink);}
  .vt-btn.active{background:rgb(var(--red-rgb)); color:#fff;}
  @media (max-width:640px){
    .vt-label{display:none;}
    .vt-btn{padding:9px 12px;}
  }

  /* ===== AGENDA VIEW =====
     Dense and scannable: a date heading with its ISO week, then rows of city / time / event /
     organizer / price. Fixed columns so the times line up down the page, which is the whole reason
     to use a list instead of cards. */
  .agenda-weeks{display:flex; gap:6px; overflow-x:auto; margin:0 0 14px; scrollbar-width:none;}
  .agenda-weeks::-webkit-scrollbar{display:none;}
  .agenda-week-tab{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    padding:9px 15px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--paper); cursor:pointer;
    font-size:13.5px; font-weight:800; color:var(--ink); white-space:nowrap;
  }
  .agenda-week-tab:hover{border-color:rgba(var(--red-rgb), .5);}
  .agenda-week-tab.active{background:var(--ink); color:var(--paper); border-color:transparent;}
  .agenda-week-count{
    font-size:11px; font-weight:800; padding:1px 6px; border-radius:999px;
    background:rgba(var(--red-rgb), .14); color:rgb(var(--red-rgb));
  }
  .agenda-week-tab.active .agenda-week-count{background:rgba(255,255,255,.2); color:#fff;}

  .agenda-day{margin-bottom:22px;}
  .agenda-day-head{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
    font-size:15px; line-height:20px; font-weight:800;
    padding:8px 0; border-bottom:2px solid var(--ink);
    text-transform:capitalize;
  }
  .agenda-week{font-size:12px; font-weight:700; color:var(--muted); text-transform:none;}
  .agenda-list{list-style:none; margin:0; padding:0;}
  .agenda-row{
    display:flex; align-items:stretch; gap:4px;
    border-bottom:1px solid var(--line);
  }
  .agenda-row:hover{background:rgba(var(--red-rgb), .05);}
  .agenda-open{
    flex:1; min-width:0; display:grid;
    grid-template-columns:44px 130px 62px minmax(0,1fr) 190px 92px;
    align-items:center; gap:12px;
    padding:9px 8px; border:none; background:none; cursor:pointer; text-align:left;
    font:inherit; color:inherit;
  }
  .ag-thumb{
    width:44px; height:32px; border-radius:6px; overflow:hidden; flex-shrink:0;
    background:var(--cream); display:grid; place-items:center;
  }
  .ag-thumb img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
  .ag-thumb-fallback{font-size:15px;}
  .ag-city{font-size:13.5px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ag-time{font-size:13.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums;}
  .ag-name{
    font-size:14px; font-weight:800; color:var(--ink);
    display:flex; align-items:center; gap:8px; min-width:0;
  }
  .ag-name > :first-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ag-flag{
    flex-shrink:0; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px;
    text-transform:uppercase; letter-spacing:.03em;
  }
  .ag-flag.hot{background:rgba(var(--red-rgb), .14); color:rgb(var(--red-rgb));}
  .ag-flag.soldout{background:var(--cream); color:var(--muted);}
  .ag-org{font-size:13px; font-weight:600; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ag-price{font-family:'Outfit'; font-size:14px; font-weight:800; text-align:right;}
  .ag-fav{
    flex-shrink:0; width:38px; border:none; background:none; cursor:pointer;
    display:grid; place-items:center;
  }
  .ag-fav svg{width:17px; height:17px; fill:none; stroke:var(--muted); stroke-width:2;}
  .ag-fav:hover svg{stroke:rgb(var(--red-rgb));}
  .ag-fav.is-favourite svg{fill:rgb(var(--red-rgb)); stroke:rgb(var(--red-rgb));}
  .agenda-foot{font-size:13px; color:var(--muted); font-weight:600; padding-top:6px;}

  /* On a phone the six columns become two lines: the artwork and time lead, the name below. */
  @media (max-width:860px){
    .agenda-open{
      grid-template-columns:44px 62px minmax(0,1fr) 78px;
      grid-template-areas:
        "thumb time name price"
        "thumb city org   org";
      row-gap:2px;
    }
    .ag-thumb{grid-area:thumb; width:44px; height:44px;}
    .ag-time{grid-area:time;}
    .ag-name{grid-area:name;}
    .ag-price{grid-area:price;}
    .ag-city{grid-area:city; font-size:12px; font-weight:700; color:var(--muted);}
    .ag-org{grid-area:org; font-size:12px;}
  }

  /* ===== TICKET POPUP from the "lowest ticket price" fact =====
     That fact stated a number and did nothing with it — the one figure a buyer wants to act on was
     the only inert part of the fact bar. It now opens every ticket with its real, fee-inclusive
     price and an add button wired to the flow's own add-to-cart. */
  .details-modal.tickets-modal{width:min(760px,100%);}
  .tickets-note{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:14px;}
  .tickets-list{list-style:none; margin:0; padding:0;}
  .tickets-row{
    display:grid; grid-template-columns:minmax(0,1fr) 110px 132px;
    align-items:center; gap:14px;
    padding:13px 0; border-bottom:1px solid var(--line);
  }
  .tickets-row:last-child{border-bottom:none;}
  .tr-info{display:flex; flex-direction:column; gap:3px; min-width:0;}
  .tr-info b{font-size:14.5px; font-weight:800;}
  .tr-desc{font-size:12.5px; color:var(--muted); font-weight:600;}
  .tr-flag{
    align-self:flex-start; font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:999px;
    background:var(--cream); color:var(--muted); text-transform:uppercase; letter-spacing:.03em;
  }
  .tr-flag.hot{background:rgba(var(--red-rgb), .14); color:rgb(var(--red-rgb));}
  .tr-price{
    font-family:'Outfit'; font-size:16px; font-weight:800; text-align:right;
    display:flex; flex-direction:column; align-items:flex-end; line-height:1.2;
  }
  .tr-price span{font-size:11px; font-weight:700; color:var(--muted);}
  .tr-action{display:flex; align-items:center; justify-content:flex-end; gap:8px;}
  .tr-incart{font-size:13px; font-weight:800; color:rgb(var(--red-rgb));}
  .tr-add{
    border:none; border-radius:999px; cursor:pointer;
    background:rgb(var(--red-rgb)); color:#fff;
    font-size:13px; font-weight:800; padding:10px 18px; transition:.15s;
  }
  .tr-add:hover:not(:disabled){filter:brightness(1.08);}
  .tr-add:disabled{background:var(--cream); color:var(--muted); cursor:not-allowed;}

  /* THE STEPPER. Same height and pill shape as the Add button it replaces, so the row does not
     resize the moment a ticket goes in and the controls below it do not jump. */
  .tr-stepper{
    display:inline-flex; align-items:center; gap:2px;
    border:1.5px solid rgb(var(--red-rgb)); border-radius:999px;
    padding:3px; background:var(--paper);
  }
  .tr-step{
    width:32px; height:32px; flex-shrink:0;
    display:grid; place-items:center;
    border:none; border-radius:50%; cursor:pointer;
    background:rgb(var(--red-rgb)); color:#fff;
    font-size:19px; font-weight:800; line-height:1;
    transition:.15s;
  }
  .tr-step:hover:not(:disabled){filter:brightness(1.08);}
  .tr-step:disabled{background:var(--cream); color:var(--muted); cursor:not-allowed;}
  .tr-count{
    min-width:32px; text-align:center;
    font-family:'Outfit'; font-size:16px; font-weight:800; color:var(--ink);
  }
  @media (max-width:560px){
    .tickets-row{grid-template-columns:minmax(0,1fr) auto; row-gap:8px;}
    .tr-price{grid-column:2; text-align:right;}
    .tr-action{grid-column:1 / -1; justify-content:flex-start;}
  }

  /* The order-level service fee, above the total, so the basket's lines visibly add up to what is
     charged instead of appearing to contradict it. */
  .cf-flow-actions .flow-actions-fee{
    display:flex; align-items:center; justify-content:space-between;
    font-size:13px; font-weight:600; color:var(--muted);
    padding-bottom:6px;
  }

  /* ===== SEARCH IN THE HERO =====
     It used to sit in the sticky header, above the hero — so a visitor whose eye landed on the
     headline had to travel back up past it. Directly under the headline the travel is a few pixels,
     and it is the widest, highest-contrast control on the page, which is what a search on a directory
     should be. */
  .hero-search{
    position:relative; display:flex; align-items:center; gap:10px;
    margin-top:18px; max-width:620px;
    background:var(--paper); border-radius:999px;
    padding:6px 6px 6px 18px;
    box-shadow:0 10px 30px rgba(0,0,0,.28);
  }
  .hero-search > svg{width:19px; height:19px; flex-shrink:0; color:var(--muted);}
  .hero-search input{
    flex:1; min-width:0; border:none; background:none; outline:none;
    font:inherit; font-size:15px; font-weight:600; color:var(--ink);
    padding:10px 0;
  }
  .hero-search input::placeholder{color:var(--muted); font-weight:500;}
  .hero-search-clear{
    flex-shrink:0; width:26px; height:26px; border-radius:50%;
    border:none; background:var(--cream); color:var(--muted);
    cursor:pointer; font-size:12px; line-height:1;
  }
  .hero-search-clear:hover{background:var(--line); color:var(--ink);}
  .hero-search-go{
    flex-shrink:0; border:none; border-radius:999px; cursor:pointer;
    background:var(--ink); color:var(--paper);
    font-size:14px; font-weight:800; padding:12px 22px;
  }
  .hero-search-go:hover{filter:brightness(1.15);}
  /* The header keeps the brand and the actions; the spacer holds them apart now the search has gone. */
  .header-inner .header-spacer{flex:1;}
  @media (max-width:720px){
    .hero-search{max-width:none; padding:5px 5px 5px 14px;}
    .hero-search-go{padding:11px 16px; font-size:13px;}
  }

  /* ===== CATEGORY CHIP ICONS =====
     Line icons instead of emoji: one weight, on the text baseline, and inheriting currentColor so an
     active chip's icon turns with its label. */
  .cat-icon{width:17px; height:17px; flex-shrink:0;}
  .chip{gap:7px;}

  /* ===== SHARED DATE FILTER =====
     Used identically by the agenda and the favourites popup. All leads and is the default; a bucket
     with nothing in it is disabled rather than removed, so the row does not jump as data changes. */
  .date-filter{
    display:flex; align-items:center; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin:0 0 14px;
  }
  .date-filter-buckets{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px;}
  .date-filter-buckets::-webkit-scrollbar{display:none;}
  .date-bucket{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
    padding:9px 15px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--paper); cursor:pointer;
    font-size:13.5px; font-weight:800; color:var(--ink); white-space:nowrap;
  }
  .date-bucket:hover:not(:disabled){border-color:rgba(var(--red-rgb), .5);}
  .date-bucket.active{background:var(--ink); color:var(--paper); border-color:transparent;}
  .date-bucket:disabled{opacity:.45; cursor:not-allowed;}
  .date-bucket-count{
    font-size:11px; font-weight:800; padding:1px 6px; border-radius:999px;
    background:rgba(var(--red-rgb), .14); color:rgb(var(--red-rgb));
  }
  .date-bucket.active .date-bucket-count{background:rgba(255,255,255,.2); color:#fff;}
  .date-pick input{
    border:none; background:none; outline:none; font:inherit;
    font-size:13.5px; font-weight:800; color:inherit; cursor:pointer; max-width:150px;
  }
  .past-toggle{
    display:inline-flex; align-items:center; gap:8px; flex-shrink:0;
    font-size:13.5px; font-weight:700; color:var(--muted); cursor:pointer;
  }
  .past-toggle input{width:16px; height:16px; accent-color:rgb(var(--red-rgb)); cursor:pointer;}
  .favourites-modal .date-filter{margin-bottom:18px;}

  /* ===== CARD PRICE: RIGHT, AT THE BOTTOM =====
     The price sat left with "N left" on the right, so the number a buyer scans for changed column
     depending on whether an event was selling fast. It is right-aligned at the foot of every card
     now — FREE and "Tickets / view options" included, since those occupy the same slot and a
     differently-aligned one would break the column just as badly. */
  .card-foot{justify-content:flex-end; gap:10px;}
  .card-remaining{margin-right:auto;}
  .price{text-align:right; margin-left:auto;}
  .price span{display:block; text-align:right;}

  /* A real on/off switch for past events, not a checkbox. The native input stays in the DOM for
     keyboard and screen readers and is visually replaced by the track. */
  .past-switch{display:inline-flex; align-items:center; gap:10px; flex-shrink:0; cursor:pointer;}
  .past-switch input{position:absolute; opacity:0; width:0; height:0;}
  .past-switch-track{
    position:relative; width:42px; height:24px; border-radius:999px;
    background:var(--line); transition:background .18s ease; flex-shrink:0;
  }
  .past-switch-thumb{
    position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%;
    background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .18s ease;
  }
  .past-switch input:checked + .past-switch-track{background:rgb(var(--red-rgb));}
  .past-switch input:checked + .past-switch-track .past-switch-thumb{left:21px;}
  .past-switch input:focus-visible + .past-switch-track{outline:2px solid rgb(var(--red-rgb)); outline-offset:2px;}
  .past-switch-label{font-size:13.5px; font-weight:700; color:var(--muted); white-space:nowrap;}
  /* The past tab is visually distinct from the live buckets — it is history, not inventory. */
  .date-bucket.is-past{border-style:dashed;}
  .date-bucket.is-past.active{background:var(--muted); border-style:solid;}

  /* The price is LAST in the row, whatever the DOM order. margin-left:auto on the price and
     margin-right:auto on "N left" were both pushing right and fighting each other, which left the
     price 137px short of the edge on any card that had a remaining count. Explicit order instead. */
  .price{order:2; margin-left:0;}
  .card-remaining{order:1; margin-right:auto;}

  /* Running events lead the agenda under their own heading rather than under a historical start
     date. Marked in the tenant colour so it reads as a status, not as another day. */
  .agenda-day-head.agenda-live{
    border-bottom-color:rgb(var(--red-rgb));
    color:rgb(var(--red-rgb));
    text-transform:uppercase; letter-spacing:.03em; font-size:13px;
  }

  /* The date filter above the curated card rows. Slightly inset so it reads as page-level rather
     than belonging to the first row's heading. */
  .cards-filter-row{padding:16px 0 4px;}

  /* ===== EVENT PREVIEW =====
     What a card click opens now. Big enough to decide from — artwork, when, where, who, price and the
     description — with buying one deliberate press away at the foot. */
  .details-modal.preview-modal{width:min(880px,100%); max-height:90vh;}
  .preview-body{padding:0;}
  .preview-media{
    position:relative; height:clamp(200px, 32vw, 320px); overflow:hidden;
    display:grid; place-items:center; background:var(--cream);
  }
  .preview-media img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
  .preview-media .hero-emoji{font-size:64px;}
  .preview-media .fav-btn{top:12px; right:12px;}
  .preview-flags{position:absolute; left:12px; bottom:12px; display:flex; gap:6px; flex-wrap:wrap;}
  .preview-thumbs{display:flex; gap:6px; padding:10px 24px 0; overflow-x:auto; scrollbar-width:none;}
  .preview-thumbs::-webkit-scrollbar{display:none;}

  .preview-facts{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
    gap:14px 20px; margin:0; padding:20px 24px 4px;
  }
  .preview-fact dt{font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
  .preview-fact dd{margin:3px 0 0; font-size:14.5px; font-weight:800; color:var(--ink);}
  .preview-fact dd a{color:rgb(var(--red-rgb));}
  .preview-fact dd a:hover{text-decoration:underline;}
  .preview-tz{display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-top:2px;}
  .preview-text{padding:16px 24px 24px;}
  .preview-text h3{font-size:15px; line-height:20px; margin-bottom:6px;}
  .preview-text p{font-size:14px; line-height:22px; color:var(--muted); white-space:pre-line;}

  /* The buy button is the widest thing in the popup: it is the one action worth taking from here. */
  .preview-foot{
    padding:16px 24px; border-top:1px solid var(--line);
    background:var(--paper); position:sticky; bottom:0;
    display:flex; flex-direction:column; gap:8px; align-items:center;
  }
  .preview-buy{
    width:100%; border:none; border-radius:999px; cursor:pointer;
    background:rgb(var(--red-rgb)); color:#fff;
    font-size:15px; font-weight:800; padding:15px 22px;
    text-transform:none; letter-spacing:.01em;
  }
  .preview-buy:hover{filter:brightness(1.08);}
  .preview-secure{font-size:12px; font-weight:600; color:var(--muted);}
  @media (max-width:640px){
    .preview-facts{padding:16px 16px 4px;}
    .preview-text{padding:14px 16px 20px;}
    .preview-foot{padding:14px 16px;}
    .preview-thumbs{padding-inline:16px;}
  }

  /* ===== SEARCH IS A REQUEST NOW =====
     The previous results stay on screen, dimmed, while the next ones load. Blanking the grid on every
     keystroke makes a fast connection look broken. */
  .events-grid.is-searching{opacity:.55; transition:opacity .15s ease;}
  .search-spinner{
    display:inline-block; width:15px; height:15px; margin-left:10px;
    border:2px solid var(--line); border-top-color:rgb(var(--red-rgb));
    border-radius:50%; animation:embed-spin .7s linear infinite; vertical-align:middle;
  }
  .search-spinner.large{width:26px; height:26px; border-width:3px; margin:0;}

  /* THE DATE IS NOT THE SMALL PRINT.
     On an event that is already on sale the card showed a bold "On Sale Now" with the actual date as a
     12px grey second line — so the one fact the visitor is scanning for was the least readable thing
     on the card. Both lines now carry the same weight and colour, with the status above the date. */
  .card-meta .start-stack b{font-weight:800; color:var(--ink); font-size:13px;}
  .card-meta .start-stack span{font-size:14px; font-weight:700; color:var(--ink);}

  /* An ended event says so instead of offering a button that cannot work. */
  .preview-ended{
    width:100%; display:flex; flex-direction:column; gap:3px; align-items:center;
    padding:14px 18px; border-radius:var(--r-sm);
    background:var(--cream); border:1px solid var(--line);
  }
  .preview-ended strong{font-size:15px; font-weight:800; color:var(--ink);}
  .preview-ended span{font-size:13px; font-weight:600; color:var(--muted);}

  /* "From €10.61" on one line. */
  .price.price-inline{display:block; font-size:15px;}

  /* ===== NEXT ALIGNED RIGHT =====
     The basket's buttons were stretched to fill the panel, which made Back as prominent as Next. Next
     is the action; Back is the escape hatch. Right-aligned, natural width, Next last. */
  .cf-flow-actions .flow-actions-buttons{
    flex-direction:row; justify-content:flex-end; gap:10px;
  }
  .cf-flow-actions .flow-actions-buttons > *{flex:0 0 auto;}
  .cf-flow-actions .next-button,
  .cf-flow-actions .back-button{width:auto; padding:12px 22px;}

  /* The organizer's other events, wide because it is a grid. */
  .details-modal.organizer-modal{width:min(1100px,100%);}
  .organizer-modal .dm-head h2{display:flex; align-items:center; gap:10px;}
  .organizer-modal .dm-head .org-logo{width:32px; height:32px; font-size:12px; display:grid; place-items:center; border-radius:10px; color:#fff;}
  .organizer-modal .events-grid{grid-template-columns:repeat(auto-fill, minmax(250px,1fr));}

  /* The promo field is white, not the page's cream, so it reads as somewhere to type. */
  .inline-shop-flow .input-promo,
  .inline-shop-flow .promoCodeInput input{
    background:#fff !important;
    border:1.5px solid var(--line) !important;
    border-radius:999px !important;
    padding:10px 16px !important;
  }
  .inline-shop-flow .input-promo:focus{
    outline:none !important;
    border-color:rgb(var(--red-rgb)) !important;
  }

  /* ===== GET STARTED FOR FREE =====
     The submission popup. Paste a link, we fill in what we can read, the organizer corrects the rest.
     Every field is editable whether or not the lookup found anything — the form is the product, the
     scrape is a shortcut. */
  .details-modal.getstarted-modal{width:min(760px,100%); max-height:92vh;}
  .getstarted-modal .dm-body{padding:22px 24px 8px; overflow-y:auto;}
  .gs-lead{font-size:14.5px; line-height:22px; color:var(--muted); margin:0 0 18px;}

  .gs-field{display:block; margin-bottom:14px;}
  .gs-field > span{
    display:block; margin-bottom:5px;
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  }
  .gs-field input,
  .gs-field textarea{
    width:100%; font:inherit; font-size:14.5px; color:var(--ink);
    background:#fff; border:1.5px solid var(--line); border-radius:12px;
    padding:11px 14px;
  }
  .gs-field textarea{resize:vertical; line-height:21px;}
  .gs-field input:focus,
  .gs-field textarea:focus{outline:none; border-color:rgb(var(--red-rgb));}

  /* The URL row is the first thing and the widest: it is the shortcut everything else hangs off. */
  .gs-url-row{display:flex; gap:8px;}
  .gs-url-row input{flex:1 1 auto; min-width:0;}
  .gs-fetch{
    flex:0 0 auto; cursor:pointer; border:none; border-radius:12px;
    background:var(--ink); color:#fff; font-size:13.5px; font-weight:800; padding:0 18px;
  }
  .gs-fetch:hover:not(:disabled){filter:brightness(1.15);}
  .gs-fetch:disabled{opacity:.45; cursor:default;}
  .gs-hint{display:block; margin-top:5px; font-size:12px; font-weight:600; color:var(--muted);}

  /* A lookup that found nothing is not an error state — it is the normal path for Facebook, so it
     reads as information rather than a red failure. */
  .gs-message{
    margin:0 0 16px; padding:11px 14px; border-radius:12px;
    background:var(--cream); border:1px solid var(--line);
    font-size:13.5px; line-height:20px; font-weight:600; color:var(--ink);
  }
  .gs-error{
    margin:4px 0 12px; font-size:13.5px; font-weight:700; color:rgb(var(--red-rgb));
  }

  .gs-grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px;}
  .gs-grid .gs-wide{grid-column:1 / -1;}

  .gs-preview-image{
    margin:4px 0 16px; border-radius:14px; overflow:hidden; border:1px solid var(--line);
    max-height:200px;
  }
  .gs-preview-image img{width:100%; height:200px; object-fit:cover; object-position:center top; display:block;}

  .gs-done{text-align:center; padding:38px 28px 30px;}
  .gs-tick{
    width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
    display:grid; place-items:center; font-size:28px; font-weight:800;
    background:rgb(var(--red-rgb)); color:#fff;
  }
  .gs-done h3{font-size:19px; line-height:25px; margin-bottom:8px;}
  .gs-done p{font-size:14.5px; line-height:22px; color:var(--muted); margin:0 0 22px;}
  .gs-done .preview-buy{width:auto; padding:13px 30px;}

  /* The footer's "sell tickets" is a button now (it opens the popup), so it has to stop looking like
     a button and go back to looking like the link beside it. */
  footer .foot-col button.foot-link{
    background:none; border:none; padding:0; cursor:pointer;
    font:inherit; color:inherit; text-align:left;
  }
  footer .foot-col button.foot-link:hover{text-decoration:underline;}

  @media (max-width:640px){
    .getstarted-modal .dm-body{padding:18px 16px 8px;}
    .gs-grid{grid-template-columns:1fr;}
    .gs-url-row{flex-direction:column;}
    .gs-fetch{padding:13px 18px;}
  }

  /* ===== THE BAR SITS ON THE HERO, AT HALF ITS HEIGHT =====
     It used to be an 84px white strip ABOVE the hero: a hard horizontal line across the top of the
     page, and 84px of the only screen that matters spent on a logo. It is now 42px, it overlays the
     hero rather than pushing it down, and it carries a black gradient that fades away into the
     footage instead of ending on a border. */
  .header-inner{height:42px;}

  /* Every control comes down with the bar. Leaving them at their old size would either overflow the
     42px or force the bar back open — the height is only real if its contents fit inside it. */
  .header-inner .brand-logo{height:26px;}
  .header-actions .btn-solid{padding:9px 17px; font-size:13.5px;}
  .header-actions .fav-header{width:32px; height:32px;}
  .header-actions .fav-header svg{width:16px; height:16px;}
  .header-inner .theme-toggle{padding:2px;}
  .header-inner .tt-track{width:46px; height:26px; padding:0 5px;}
  .header-inner .tt-icon{font-size:12px;}
  .header-inner .locale-picker select{padding:6px 24px 6px 10px; font-size:11.5px;}
  .header-inner .back-btn{padding:7px 14px 7px 8px; font-size:13px;}

  /* Pulls the hero up UNDER the bar. The header stays in flow and sticky, so scrolling still parks
     it at the top and the page below scrolls beneath it — only the hero starts higher. */
  header.main.site-header{margin-bottom:-42px;}
  /* Clear of the bar, and 44px higher up the page than the old header+padding put it. */
  .hero{padding-top:68px;}

  /* THE BAR IS BLACK, ALWAYS.
     It used to take the page's white background the moment the hero scrolled away, which meant the
     one element that stays on screen changed colour under you. Black in both states: transparent
     over the hero at the top, solid black once past it. */
  header.main.site-header{
    background:var(--black);
    border-bottom-color:rgba(255,255,255,.12);
  }
  html[data-theme="dark"] header.main.site-header{background:var(--black);}

  /* At the top it has no background of its own — the gradient below is the only thing separating the
     bar from the footage, and it has no edge. */
  header.main.site-header.over-hero{
    background:transparent;
    backdrop-filter:none;
    border-bottom-color:transparent;
  }
  html[data-theme="dark"] header.main.site-header.over-hero{background:transparent;}
  header.main.site-header.over-hero::before{
    content:"";
    position:absolute; left:0; right:0; top:0;
    /* Taller than the bar so the fade finishes inside the video rather than at the bar's own edge,
       which is what makes it read as one surface instead of two. */
    height:260%;
    pointer-events:none;
    /* Behind the bar's own contents but inside the header's stacking context, so it stays above the
       hero video and its veil. */
    z-index:-1;
    background:linear-gradient(180deg,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.72) 34%,
      rgba(0,0,0,.34) 68%,
      rgba(0,0,0,0) 100%);
  }

  /* WHITE INK IN BOTH STATES. Every control in the bar is styled for a light surface — paper
     backgrounds, ink text, hairline borders — all of which disappear against black. */
  header.main.site-header .locale-picker select,
  header.main.site-header .fav-header,
  header.main.site-header .theme-toggle{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.28);
    color:#fff;
  }
  header.main.site-header .locale-picker select{
    /* The chevron is a data URI in the muted ink colour, invisible here. */
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position:right 8px center; background-repeat:no-repeat; background-size:1em;
  }
  header.main.site-header .locale-picker select option{color:var(--ink); background:var(--paper);}
  header.main.site-header .fav-header svg{stroke:#fff;}
  header.main.site-header .fav-header.is-active svg{fill:#fff; stroke:#fff;}
  header.main.site-header .locale-picker select:hover,
  header.main.site-header .fav-header:hover,
  header.main.site-header .theme-toggle:hover{border-color:rgba(255,255,255,.7);}

  @media (max-width:640px){
    /* A phone hero is short, so the bar takes proportionally more of it — the fade is kept shorter
       so it does not reach the headline. */
    header.main.site-header.over-hero::before{height:200%;}
    .hero{padding-top:58px;}
  }

  /* The toggle's thumb is absolutely sized, so shrinking the track alone left a 28px thumb bulging
     out of a 26px rail and covering both icons. Thumb, travel and rail come down together. */
  .header-inner .tt-thumb{width:22px; height:22px; top:2px; left:2px;}
  html[data-theme="dark"] .header-inner .tt-thumb{transform:translateX(20px);}

  /* A dark-ink logo gets a white plate so it stays legible on black. At the footer's size that reads
     as a plate; in a 42px bar the old padding read as a sticker, so it is tightened to sit inside
     the bar rather than fill it. */
  header.main.site-header .brand-logo.logo-ink-dark.on-dark{
    padding:4px 8px;
    border-radius:8px;
    height:22px;
  }

  /* A FIXED 42px BAR ON EVERY WIDTH.
     The header used to be height:auto and allowed to wrap on a phone, which is fine when it sits in
     its own strip and simply gets taller. It is not fine now: the bar is pulled over the hero by
     exactly its own height, so a wrapped second row hangs over the hero copy. It stays one row, and
     the controls get small enough to make that true rather than being allowed to overflow. */
  @media (max-width:720px){
    .header-inner{height:42px; padding:0; flex-wrap:nowrap; gap:8px;}
  }
  @media (max-width:420px){
    .header-inner .header-actions{gap:6px;}
    .header-inner .header-actions .btn-solid{padding:8px 12px; font-size:12.5px;}
    .header-inner .locale-picker select{padding:5px 20px 5px 8px; font-size:11px;}
    .header-inner .header-actions .fav-header{width:30px; height:30px;}
    .header-inner .header-actions .fav-header svg{width:15px; height:15px;}
    .header-inner .brand-logo{height:22px;}
    header.main.site-header .brand-logo.logo-ink-dark.on-dark{height:19px; padding:3px 6px;}
  }

  /* One CTA label at a time. Full wording by default, the short one where the bar runs out of room. */
  .header-actions .btn-solid .cta-short{display:none;}
  @media (max-width:480px){
    .header-actions .btn-solid .cta-long{display:none;}
    .header-actions .btn-solid .cta-short{display:inline;}
  }

  /* ===== THE HERO IS CENTRED =====
     Everything in it — eyebrow, headline, subtitle, search, quick buttons and stats — sits on the
     page's centre line rather than ragged along the left edge. The video behind it is composed
     around its own centre, so left-aligned copy sat off to one side of whatever it was over. */
  .hero-inner{text-align:center;}
  .hero-sub{margin-left:auto; margin-right:auto;}
  .hero-search{margin-left:auto; margin-right:auto;}
  .hero-quick{justify-content:center;}
  .hero-stats{justify-content:center;}
  /* The stat blocks keep their own left-aligned numbers otherwise, which reads as ragged inside a
     centred row. */
  .hero-stats .stat{text-align:center;}

  /* ===== THE SEARCH BOX LETS THE VIDEO THROUGH =====
     It was a solid white pill — a hole punched in the footage. It is glass now: enough of the video
     comes through to read as part of the hero, blurred and darkened enough behind the text that the
     placeholder stays legible over whatever frame is playing. */
  .hero-search{
    background:rgba(255,255,255,.12);
    border:1.5px solid rgba(255,255,255,.34);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    box-shadow:0 10px 34px rgba(0,0,0,.30);
  }
  .hero-search:focus-within{
    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.6);
  }
  .hero-search > svg{color:rgba(255,255,255,.8);}
  .hero-search input{color:#fff;}
  .hero-search input::placeholder{color:rgba(255,255,255,.72); font-weight:500;}
  .hero-search-clear{background:rgba(255,255,255,.2); color:#fff;}
  .hero-search-clear:hover{background:rgba(255,255,255,.34); color:#fff;}
  /* The button stays opaque: it is the one thing in the pill that has to be unmistakably solid, and
     white-on-glass would read as another piece of the placeholder. */
  .hero-search-go{background:#fff; color:var(--black);}
  .hero-search-go:hover{background:rgba(255,255,255,.86); filter:none;}

  /* ===== THE LOGO STAYS BIG =====
     It was shrunk to fit the shorter bar, which traded the brand for the bar. It keeps its size in
     both states instead, and the plate it sits on is tightened rather than the mark. */
  .header-inner .brand-logo{height:30px;}
  header.main.site-header .brand-logo.logo-ink-dark.on-dark{
    height:30px;
    padding:3px 8px;
    border-radius:8px;
  }
  @media (max-width:420px){
    .header-inner .brand-logo{height:26px;}
    header.main.site-header .brand-logo.logo-ink-dark.on-dark{height:26px; padding:2px 6px;}
  }

  /* "On Sale Now" as a caption above the date rather than instead of it. */
  .preview-status{
    display:block; font-size:11.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em;
    color:rgb(var(--red-rgb)); margin-bottom:1px;
  }

  /* ===== NO HORIZONTAL SCROLL ON A PHONE =====
     Measured on a 390px viewport: document.scrollWidth was 674px while body.scrollWidth was 390px,
     so the whole page slid sideways under the finger. Bisecting it landed on one element —
     .date-filter-buckets.

     It is a flex item inside .date-filter and it has overflow-x:auto, which looks like it should
     already clip. It does not: a flex item's min-width defaults to auto, so the BOX itself was
     allowed to grow to the width of all its date pills. overflow-x:auto only scrolls content that
     is wider than the box, and the box was wider than the screen. min-width:0 is what makes the
     box shrink to its container so its own scroller does the work.

     Every other rail on the page gets the same guard, because the failure mode is invisible until
     one of them is dropped into a flex parent. */
  .date-filter{max-width:100%;}
  .date-filter-buckets,
  .agenda-weeks,
  .chip-track,
  .scroll-row,
  .org-row,
  .gallery-row,
  .ae-filters,
  .preview-thumbs,
  .lb-strip{min-width:0; max-width:100%;}

  /* No overflow-x:hidden on html or body as a catch-all: it turns the document into its own scroll
     container and that is what breaks position:sticky, which the black header depends on. The cause
     above is fixed at source instead. */

  /* ===== HORIZONTAL CARD SPACING =====
     5px read as a printing error. Real air between the cards, and enough of it on a phone that the
     next card's edge is visibly a separate card rather than a seam. */
  .scroll-row{gap:22px;}
  .events-grid{column-gap:22px;}
  .cat-grid{column-gap:22px;}
  @media (max-width:720px){
    .scroll-row{gap:16px;}
    .events-grid{column-gap:16px;}
  }

  /* "ABOUT THIS EVENT" in caps. Uppercased in CSS rather than in the string, so every translation
     stays intact and a screen reader still reads words. */
  .dm-text h3,
  .preview-text h3{text-transform:uppercase; letter-spacing:.04em;}

  /* The hero is the tenant's name and slogan, centred on every width — the counters and the eyebrow
     that used to sit around them are gone, so the two lines carry it alone. */
  .hero-inner{text-align:center;}
  /* Measured on a 1440px desktop: the headline's own box was 900px wide (its max-width) sitting at
     the left edge of a 1360px hero, so text-align:center only centred the words inside a box that
     was itself 198px off the page's centre line. The box has to be centred too. */
  .hero-inner h1{text-align:center; margin-left:auto; margin-right:auto;}
  .hero-sub{text-align:center; margin-left:auto; margin-right:auto; max-width:720px;}

  /* The pill rails report their content width up to the document, which makes documentElement
     scrollWidth 674px on a 390px phone even though the page itself no longer scrolls. Paint
     containment stops the report at the rail. Not applied to .scroll-row: the cards' hover glow is
     drawn outside their border box and containment would shave it. */
  .date-filter-buckets,
  .agenda-weeks,
  .chip-track,
  .ae-filters,
  .preview-thumbs,
  .lb-strip{contain:paint;}

  /* ===== THE HEADER FITS A 390px PHONE =====
     Measured on the event page: the header row's content was 406px inside a 390px viewport, so that
     page slid 16px sideways. The bar is one non-wrapping row by design (it overlays the hero by
     exactly its own height, so a second row would hang over the copy) — which means the controls
     have to fit rather than be allowed to push past the edge.

     The back button's word is what goes: the arrow says "back" on its own, and the label is still
     read out because it is only visually hidden. */
  @media (max-width:520px){
    .back-btn .back-label{
      position:absolute; width:1px; height:1px; overflow:hidden;
      clip-path:inset(50%); white-space:nowrap;
    }
    .header-inner .back-btn{padding:7px 9px; gap:0;}
  }
  /* And the row itself can no longer report content it does not have room for. */
  @media (max-width:720px){
    .header-inner{min-width:0;}
    .header-inner > *{min-width:0;}
  }

  /* ===== THE HERO'S TWO BUTTONS ARE FILTER PILLS =====
     They were translucent glass with an emoji; the filters directly below them are solid pills with a
     line icon. Same pill now — same padding, radius, border weight, type size and icon — so the eye
     reads one control family down the page. Kept solid rather than glass: they sit over video, and a
     translucent pill on footage is the one place this design cannot hold its contrast. */
  .qbtn{
    flex-shrink:0;
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 18px; border-radius:999px;
    border:1.5px solid var(--line); background:var(--paper); color:var(--ink);
    font-size:14px; font-weight:700; line-height:20px;
    white-space:nowrap; cursor:pointer;
    transition:.15s;
  }
  .qbtn:hover{background:var(--cream); border-color:var(--ink);}
  .qbtn .cat-icon{width:17px; height:17px; flex-shrink:0;}
  @media (max-width:720px){
    .qbtn{min-height:44px;}
  }

  /* A DATE LINE THAT CARRIES A RANGE NEEDS ROOM TO WRAP.
     "03 SUN JUN 2025 - 22:00 → 04 MON JUN 2025 - 06:00" does not fit a 300px card on one line. The
     row was a nowrap flex line centred on its icon, so a long range pushed the clock icon out of the
     card. The icon now sits at the top of the line and the text wraps under itself. */
  .card-meta{align-items:flex-start; flex-wrap:wrap;}
  .card-meta svg{margin-top:3px;}
  .card-meta .start-stack{min-width:0; flex:1 1 auto;}
  .card-meta .start-stack span{overflow-wrap:anywhere;}