/* Worcester Show ticket store demo — shared brand system
   Palette lifted from worcestershow.org.uk (retro fairground) */
@import url('https://fonts.googleapis.com/css2?family=Rye&family=Nunito+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400&display=swap');

:root{
  --red:#D94F3B;
  --red-deep:#B93A28;
  --topbar:#E05A45;
  --sky:#BCD8EA;
  --sky-light:#CDE3F2;
  --blue:#4B8FC2;
  --blue-deep:#3B77A4;
  --mustard:#E9A73C;
  --green:#57A05A;
  --green-deep:#42804A;
  --ink:#23272B;
  --ink-soft:#4A4F55;
  --cream:#FDF6EC;
  --paper:#FFFFFF;
  --line:#E8E2D8;
  --radius:14px;
  --shadow:0 10px 30px rgba(35,39,43,.12);
  --display:'Rye', 'Georgia', serif;
  --body:'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--body); color:var(--ink); background:var(--cream); font-size:16px; line-height:1.55;}
img{max-width:100%;}
a{color:var(--blue-deep);}

/* ---------- demo switcher bar ---------- */
.demobar{background:var(--ink); color:#fff; font-size:12.5px; padding:7px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; position:sticky; top:0; z-index:60;}
.demobar b{color:var(--mustard); font-weight:800; letter-spacing:.06em; text-transform:uppercase;}
.demobar nav{display:flex; gap:2px; flex-wrap:wrap;}
.demobar a{color:#DDE3E8; text-decoration:none; padding:3px 9px; border-radius:99px;}
.demobar a:hover{background:#3A4046; color:#fff;}
.demobar a.on{background:var(--red); color:#fff; font-weight:700;}

/* ---------- replicated worcestershow.org.uk chrome ---------- */
.topbar{background:var(--topbar); color:#fff; font-size:13px; padding:9px 24px; display:flex; justify-content:space-between; align-items:center;}
.topbar .soc{display:flex; gap:8px;}
.topbar .soc span{width:26px; height:26px; border-radius:6px; background:var(--mustard); display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:13px;}
.topbar a{color:#fff; text-decoration:none;}

.masthead{background:repeating-conic-gradient(from 0deg at 50% 130%, var(--sky-light) 0deg 9deg, var(--sky) 9deg 18deg); padding:26px 24px 22px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:16px; text-decoration:none;}
.brand .roundel{width:84px; height:84px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:44px; box-shadow:0 4px 0 rgba(0,0,0,.08);}
.brand .word{line-height:1.05;}
.brand .word .the{font-family:var(--display); color:var(--red); font-size:15px; letter-spacing:.08em;}
.brand .word .name{font-family:var(--display); color:var(--red); font-size:34px; letter-spacing:.02em; display:block;}
.brand .word .tag{font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--green-deep); text-transform:uppercase;}
.mast-cta{display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.btn{display:inline-block; border:0; cursor:pointer; text-decoration:none; text-align:center; font-family:var(--display); font-size:18px; padding:13px 26px; border-radius:8px; background:var(--blue); color:#fff; box-shadow:0 3px 0 var(--blue-deep); transition:transform .06s ease;}
.btn:active{transform:translateY(2px); box-shadow:none;}
.btn.red{background:var(--red); box-shadow:0 3px 0 var(--red-deep);}
.btn.green{background:var(--green); box-shadow:0 3px 0 var(--green-deep);}
.btn.ghost{background:#fff; color:var(--red); box-shadow:inset 0 0 0 2px var(--red);}
.btn.small{font-size:14px; padding:8px 16px;}
.btn-body{font-family:var(--body); font-weight:800; letter-spacing:.02em;}

.mainnav{background:#fff; border-top:2px solid var(--red); border-bottom:2px solid var(--red); padding:0 16px; display:flex; justify-content:center; gap:4px; flex-wrap:wrap; position:sticky; top:34px; z-index:50;}
.mainnav a{font-family:var(--display); color:var(--red-deep); text-decoration:none; font-size:15.5px; padding:13px 13px;}
.mainnav a:hover{color:var(--blue-deep);}
.mainnav a.here{color:var(--ink); border-bottom:3px solid var(--mustard);}
.mainnav .ext{opacity:.75; font-size:14.5px;}

/* ---------- layout helpers ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
.section{padding:52px 0 8px;}
.kicker{font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:12px; color:var(--green-deep);}
h2.showhead{font-family:var(--display); color:var(--red); font-size:32px; margin:4px 0 6px;}
.lede{color:var(--ink-soft); max-width:640px;}
.grid{display:grid; gap:20px; margin-top:24px;}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}

.card{background:var(--paper); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column;}
.card .art{height:120px; display:flex; align-items:center; justify-content:center; font-size:44px; background:repeating-linear-gradient(45deg, var(--sky-light) 0 18px, var(--sky) 18px 36px);}
.card .art.red{background:repeating-linear-gradient(45deg, #F3C9C0 0 18px, #EFB9AE 18px 36px);}
.card .art.gold{background:repeating-linear-gradient(45deg, #F6DDB2 0 18px, #F1D097 18px 36px);}
.card .art.green{background:repeating-linear-gradient(45deg, #CBE3CB 0 18px, #BBD9BC 18px 36px);}
.card .body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card h3{font-size:18px; font-weight:800;}
.card .desc{font-size:14px; color:var(--ink-soft); flex:1;}
.price-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.price{font-size:22px; font-weight:800;}
.price small{font-size:12px; font-weight:600; color:var(--ink-soft);}
.was{font-size:13px; color:var(--ink-soft); text-decoration:line-through; margin-right:6px;}
.chip{display:inline-block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:99px; background:var(--sky-light); color:var(--blue-deep);}
.chip.gold{background:#F6E3C2; color:#8A5F16;}
.chip.green{background:#D6E9D6; color:var(--green-deep);}
.chip.red{background:#F6D3CC; color:var(--red-deep);}

.stepper{display:inline-flex; align-items:center; border:2px solid var(--line); border-radius:10px; overflow:hidden;}
.stepper button{border:0; background:#F4EEE3; width:34px; height:34px; font-size:18px; font-weight:800; cursor:pointer; color:var(--ink);}
.stepper span{min-width:38px; text-align:center; font-weight:800;}

/* basket */
.basket-fab{position:fixed; right:22px; bottom:22px; z-index:70; background:var(--red); color:#fff; border:0; cursor:pointer; border-radius:99px; padding:14px 22px; font-family:var(--body); font-weight:800; font-size:15px; box-shadow:0 12px 28px rgba(185,58,40,.45); text-decoration:none; display:flex; gap:10px; align-items:center;}
.basket-fab .ct{background:#fff; color:var(--red-deep); border-radius:99px; min-width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; padding:0 7px;}

.note{background:#FFF3D9; border:1px solid #EDD9A8; color:#6B4E12; border-radius:10px; padding:10px 14px; font-size:13.5px;}
.note.blue{background:#E3F0FA; border-color:#BFDCEF; color:#2D5B7E;}
.note.green{background:#E2F0E2; border-color:#BAD9BB; color:#2F5D33;}

/* band CTA */
.band{background:var(--red); color:#fff; margin-top:56px; padding:42px 0;}
.band h2{font-family:var(--display); font-size:28px; margin-bottom:6px;}
.band p{opacity:.92; max-width:700px;}
.band .btn{margin-top:16px;}

footer.showfoot{background:var(--ink); color:#B9C0C7; font-size:13.5px; margin-top:64px; padding:36px 0;}
footer.showfoot .cols{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;}
footer.showfoot b{color:#fff;}
footer.showfoot a{color:#DDE3E8;}

/* ---------- tables / admin ---------- */
.table{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); font-size:14px;}
.table th{background:#F4EEE3; text-align:left; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); padding:11px 14px;}
.table td{padding:12px 14px; border-top:1px solid var(--line); vertical-align:middle;}
.table tr:hover td{background:#FBF7EF;}
.right{text-align:right;}
.status{display:inline-block; font-size:11.5px; font-weight:800; padding:3px 10px; border-radius:99px;}
.status.ok{background:#D6E9D6; color:var(--green-deep);}
.status.pend{background:#F6E3C2; color:#8A5F16;}
.status.bad{background:#F6D3CC; color:var(--red-deep);}
.status.info{background:#DCEBF7; color:var(--blue-deep);}

/* ---------- phone frame ---------- */
.phone{width:390px; max-width:100%; margin:0 auto; background:#0F1215; border-radius:44px; padding:14px; box-shadow:0 30px 60px rgba(0,0,0,.35);}
.phone .screen{background:#F4F1EA; border-radius:32px; overflow:hidden; min-height:700px; display:flex; flex-direction:column;}
.phone .notch{height:28px; display:flex; align-items:center; justify-content:center;}
.phone .notch i{width:120px; height:22px; background:#0F1215; border-radius:0 0 14px 14px; display:block;}
.appbar{background:var(--red); color:#fff; padding:14px 18px 12px; text-align:center;}
.appbar .t{font-family:var(--display); font-size:19px;}
.appbar .s{font-size:12px; opacity:.9;}

/* QR */
.qr{background:#fff; padding:10px; border-radius:12px; display:inline-block; line-height:0; border:1px solid var(--line);}
.qr svg{width:150px; height:150px; display:block;}
.qr.big svg{width:190px; height:190px;}

@media (max-width:720px){
  .masthead{justify-content:center; text-align:center;}
  .mast-cta{align-items:center;}
  .mainnav{position:static;}
}