/* ==========================================================================
   Level Up Life — dark training theme
   Near-black ground, photographic backgrounds, signal orange.
   ========================================================================== */

:root{
  --ground:#0C0F14; --surface:#151A21; --surface-2:#1C222B; --raised:#222A34;
  --ink:#F3F5F8; --ink-soft:#98A2B3; --ink-dim:#6B7683;
  --line:#242C37; --line-soft:#1C222B;
  --signal:#FF5A1F; --signal-hi:#FF7A47; --signal-dim:rgba(255,90,31,.14);
  --accent:#37D399; --accent-dim:rgba(55,211,153,.13);
  --font-display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --maxw:1200px; --r:8px; --r-lg:16px;
  --shadow:0 24px 60px -30px rgba(0,0,0,.85);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:800; letter-spacing:-.025em; line-height:1.05; margin:0}
h1{font-size:clamp(2.5rem,6.2vw,4.6rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.7rem)}
h3{font-size:1.15rem; letter-spacing:-.015em; font-weight:700}
p{margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.empty{text-align:center; padding:70px 20px; color:var(--ink-soft)}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:60; background:rgba(12,15,20,.86);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.header-inner{max-width:var(--maxw); margin:0 auto; padding:13px 24px; display:flex; align-items:center; gap:30px}
.wordmark{display:flex; align-items:center; gap:10px; text-decoration:none;
  font-family:var(--font-display); font-weight:800; font-size:1.08rem; letter-spacing:-.035em; white-space:nowrap}
.wordmark svg{width:30px; height:30px; flex:none; display:block}
.main-nav{display:flex; gap:24px; margin-left:6px}
.main-nav a{text-decoration:none; font-size:.9rem; color:var(--ink-soft); padding:5px 0;
  border-bottom:2px solid transparent; transition:color .15s,border-color .15s}
.main-nav a:hover,.main-nav a[aria-current]{color:var(--ink); border-color:var(--signal)}
.header-tail{margin-left:auto; display:flex; align-items:center; gap:12px}
.menu-btn{display:none; background:none; border:1px solid var(--line); border-radius:var(--r);
  width:38px; height:38px; cursor:pointer}
.menu-btn span{display:block; width:16px; height:2px; background:var(--ink); margin:3px auto; border-radius:2px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:.94rem; padding:13px 24px;
  border-radius:100px; border:1px solid transparent; text-decoration:none;
  transition:transform .12s, background .16s, border-color .16s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--signal); color:#fff}
.btn-primary:hover{background:var(--signal-hi)}
.btn-ink{background:var(--ink); color:var(--ground)}
.btn-ink:hover{background:#fff}
.btn-outline{border-color:rgba(255,255,255,.28); color:var(--ink); background:rgba(255,255,255,.04)}
.btn-outline:hover{border-color:var(--ink); background:rgba(255,255,255,.1)}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- Hero with photographic background ---------- */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero::before{content:""; position:absolute; inset:0;
  background-image:url('/assets/img/hero.jpg'); background-size:cover; background-position:center 30%}
.hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(12,15,20,.96) 0%, rgba(12,15,20,.88) 42%, rgba(12,15,20,.55) 72%, rgba(12,15,20,.72) 100%)}
.hero-inner{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto;
  padding:96px 24px 84px; display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
.eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:.73rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--signal)}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--signal); border-radius:2px}
.hero h1{margin:18px 0 20px}
.hero p.lede{font-size:1.12rem; color:var(--ink-soft); max-width:46ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-stats{display:flex; gap:34px; margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.14)}
.hero-stats div span{display:block}
.hero-stats .n{font-family:var(--font-display); font-size:1.7rem; font-weight:800; letter-spacing:-.03em}
.hero-stats .l{font-size:.82rem; color:var(--ink-soft)}
.hero-card{background:rgba(21,26,33,.9); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow)}
.hero-card h3{margin-bottom:4px}
.hero-card .sub{font-size:.86rem; color:var(--ink-soft); margin-bottom:20px}
.hero-card ul{list-style:none; margin:0; padding:0; display:grid; gap:13px}
.hero-card li{font-size:.91rem; display:flex; gap:11px; align-items:flex-start; color:var(--ink-soft)}
.hero-card li b{color:var(--ink); font-weight:600}
.tick{width:20px; height:20px; border-radius:50%; background:var(--signal-dim); color:var(--signal);
  display:grid; place-items:center; font-size:.68rem; flex:none; margin-top:2px; font-weight:700}

/* ---------- Sections ---------- */
.section{padding:78px 0}
.section.tight{padding:56px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px}
.section-head p{color:var(--ink-soft); margin-top:11px; max-width:54ch}
.link-arrow{text-decoration:none; font-weight:600; font-size:.92rem; color:var(--ink);
  border-bottom:2px solid var(--signal); padding-bottom:2px}

/* ---------- Training-type tiles (photo backgrounds) ---------- */
.type-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.type-tile{position:relative; overflow:hidden; min-height:230px; border-radius:var(--r-lg);
  border:1px solid var(--line); text-decoration:none; display:flex; flex-direction:column;
  justify-content:flex-end; padding:20px; isolation:isolate; transition:transform .2s, border-color .2s}
.type-tile::before{content:""; position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center; transition:transform .5s ease}
.type-tile::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(12,15,20,.15) 0%, rgba(12,15,20,.72) 55%, rgba(12,15,20,.95) 100%)}
.type-tile:hover{transform:translateY(-4px); border-color:var(--signal)}
.type-tile:hover::before{transform:scale(1.07)}
.type-tile[data-t="gym"]::before{background-image:url('/assets/img/type-gym.jpg')}
.type-tile[data-t="inhouse"]::before{background-image:url('/assets/img/type-inhouse.jpg')}
.type-tile[data-t="sport"]::before{background-image:url('/assets/img/type-sport.jpg')}
.type-tile[data-t="pairs"]::before{background-image:url('/assets/img/type-pairs.jpg')}
.type-tile[data-t="online"]::before{background-image:url('/assets/img/type-online.jpg')}
.type-tile h3{font-size:1.02rem; margin-bottom:5px}
.type-tile p{font-size:.83rem; color:rgba(243,245,248,.72); margin-bottom:9px}
.type-tile .from{font-size:.79rem; font-weight:700; color:var(--signal)}

/* ---------- Package cards ---------- */
.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.pkg{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px; display:flex; flex-direction:column; gap:13px; position:relative;
  text-decoration:none; color:inherit; transition:transform .18s,border-color .18s,box-shadow .18s}
.pkg,.pkg *{text-decoration:none}
.pkg:hover{transform:translateY(-4px); border-color:var(--signal); box-shadow:var(--shadow)}
.pkg.is-featured{border-color:rgba(255,90,31,.45); background:linear-gradient(180deg,rgba(255,90,31,.05),transparent 40%),var(--surface)}
.pkg .tag{position:absolute; top:-11px; left:24px; background:var(--signal); color:#fff;
  font-size:.67rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:100px}
.pkg .type-label{font-size:.75rem; color:var(--ink-dim); letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.pkg h3{font-size:1.3rem}
.pkg .desc{font-size:.9rem; color:var(--ink-soft); flex:1}
.pkg-meta{display:flex; gap:18px; font-size:.83rem; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:14px}
.pkg-meta b{color:var(--ink); font-weight:600}
.pkg-price{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.pkg-price .amt{font-family:var(--font-display); font-size:1.8rem; font-weight:800; letter-spacing:-.035em}
.pkg-price .per{font-size:.81rem; color:var(--ink-dim)}

/* ---------- Trainer carousel ---------- */
.carousel-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:4px 2px 18px; scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.trainer{flex:0 0 290px; scroll-snap-align:start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:24px;
  display:flex; flex-direction:column; gap:11px}
.avatar{width:60px; height:60px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.3rem; letter-spacing:-.03em;
  color:#fff; flex:none}
.avatar.c1{background:linear-gradient(140deg,#0F766E,#0B5D51)}
.avatar.c2{background:linear-gradient(140deg,#EA580C,#C2410C)}
.avatar.c3{background:linear-gradient(140deg,#2563EB,#1E3A8A)}
.avatar.c4{background:linear-gradient(140deg,#7C3AED,#5B21B6)}
.avatar.c5{background:linear-gradient(140deg,#DB2777,#9D174D)}
.trainer h3{font-size:1.09rem; margin-top:3px}
.trainer .spec{font-size:.84rem; color:var(--signal); font-weight:600}
.trainer .bio{font-size:.87rem; color:var(--ink-soft); flex:1}
.trainer .certs{display:flex; flex-wrap:wrap; gap:6px}
.trainer .certs span{font-size:.69rem; background:var(--raised); padding:4px 10px; border-radius:100px; color:var(--ink-soft)}
.trainer .yrs{font-size:.79rem; color:var(--ink-dim); border-top:1px solid var(--line); padding-top:12px}
.carousel-nav{display:flex; gap:8px}
.carousel-nav button{width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; font-size:1rem; color:var(--ink);
  display:grid; place-items:center; transition:background .15s,border-color .15s}
.carousel-nav button:hover{background:var(--signal); border-color:var(--signal); color:#fff}
.carousel-nav button:disabled{opacity:.3; cursor:not-allowed}
.carousel-nav button:disabled:hover{background:var(--surface); border-color:var(--line); color:var(--ink)}

/* ---------- Filter chips ---------- */
.rail{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:28px}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:100px; padding:9px 17px;
  font-size:.87rem; cursor:pointer; font-family:inherit; color:var(--ink-soft); transition:all .15s}
.chip:hover{border-color:var(--ink-soft); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--signal); border-color:var(--signal); color:#fff}

/* ---------- Photo band ---------- */
.band{position:relative; overflow:hidden; border-radius:var(--r-lg); padding:64px 48px; isolation:isolate}
.band::before{content:""; position:absolute; inset:0; z-index:-2;
  background-image:url('/assets/img/band.jpg'); background-size:cover; background-position:center 35%}
.band::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(95deg, rgba(12,15,20,.95) 0%, rgba(12,15,20,.82) 55%, rgba(12,15,20,.45) 100%)}
.band h2{max-width:18ch}
.band p{color:var(--ink-soft); margin-top:14px; max-width:52ch}
.band .btn{margin-top:26px}

/* ---------- Detail / panels ---------- */
.detail,.booking{display:grid; grid-template-columns:1.35fr .85fr; gap:40px; align-items:start}
.panel,.summary{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px}
.summary{position:sticky; top:98px}
.summary h3{margin-bottom:5px}
.summary .sub{font-size:.84rem; color:var(--ink-dim); margin-bottom:18px}
.summary-line{display:flex; justify-content:space-between; gap:12px; font-size:.9rem; padding:9px 0;
  border-bottom:1px solid var(--line-soft)}
.summary-line span:first-child{color:var(--ink-soft)}
.summary-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line)}
.summary-total .amt{font-family:var(--font-display); font-size:1.8rem; font-weight:800; letter-spacing:-.035em}
.includes{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.includes li{display:flex; gap:11px; font-size:.93rem; color:var(--ink-soft)}

/* ---------- Booking steps ---------- */
.book-step{border:1px solid var(--line); background:var(--surface); border-radius:var(--r-lg);
  padding:26px; margin-bottom:18px}
.book-step h3{display:flex; align-items:center; gap:11px; margin-bottom:18px}
.book-step h3 i{width:27px; height:27px; border-radius:50%; background:var(--signal); color:#fff;
  font-style:normal; font-size:.79rem; font-weight:700; display:grid; place-items:center; flex:none}
.pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:10px}
.slot-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:9px}
.pick{border:1px solid var(--line); background:var(--surface-2); border-radius:var(--r);
  padding:14px; cursor:pointer; text-align:left; font:inherit; font-size:.9rem; color:var(--ink);
  transition:border-color .15s,background .15s}
.pick:hover{border-color:var(--ink-soft)}
.pick[aria-pressed="true"]{border-color:var(--signal); background:var(--signal-dim);
  box-shadow:inset 0 0 0 1px var(--signal)}
.pick b{display:block; font-weight:600}
.pick span{font-size:.79rem; color:var(--ink-soft)}

/* ---------- Forms ---------- */
label{display:block; font-size:.85rem; font-weight:600; margin-bottom:7px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r);
  font:inherit; font-size:.95rem; background:var(--surface-2); color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink-dim)}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(255,90,31,.4); outline-offset:1px; border-color:var(--signal)}
.field{margin-bottom:17px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.note{background:var(--accent-dim); border:1px solid rgba(55,211,153,.25); color:#8FE9C6;
  border-radius:var(--r); padding:14px 16px; font-size:.88rem}
.pay-methods{display:flex; align-items:center; gap:10px; margin:16px 0 4px}
.secure-line{display:flex; align-items:center; gap:7px; font-size:.8rem; color:var(--ink-dim); margin-top:13px}

/* ---------- Quotes ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.quote{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px}
.quote p{font-size:.95rem; margin-bottom:15px}
.quote .who{font-size:.83rem; color:var(--ink-dim)}

/* ---------- Prose ---------- */
.prose{max-width:70ch}
.prose h2{margin:36px 0 12px; font-size:1.45rem}
.prose h3{margin:26px 0 8px}
.prose p,.prose li{color:var(--ink-soft); margin-bottom:13px}
.prose ul{padding-left:20px}
.prose a{color:var(--signal)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line); margin-top:70px; background:var(--surface)}
.footer-grid{max-width:var(--maxw); margin:0 auto; padding:56px 24px 36px;
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px}
.footer-grid h4{font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:15px}
.footer-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer-grid a{text-decoration:none; font-size:.9rem; color:var(--ink-soft)}
.footer-grid a:hover{color:var(--signal)}
.footer-blurb{font-size:.89rem; color:var(--ink-soft); margin-top:14px; max-width:34ch}
.footer-bottom{max-width:var(--maxw); margin:0 auto; padding:18px 24px 36px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:14px; font-size:.82rem; color:var(--ink-dim); flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr; gap:42px; padding:64px 24px 56px}
  .type-grid{grid-template-columns:repeat(3,1fr)}
  .pkg-grid,.quotes{grid-template-columns:repeat(2,1fr)}
  .detail,.booking{grid-template-columns:1fr}
  .summary{position:static}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .main-nav{display:none}
  .menu-btn{display:block}
  .main-nav.open{display:flex; position:absolute; left:0; right:0; top:100%; background:var(--surface);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:8px 24px 16px; z-index:70}
  .main-nav.open a{padding:12px 0; border-bottom:1px solid var(--line)}
  .type-grid,.pkg-grid,.quotes,.grid-2{grid-template-columns:1fr}
  .trainer{flex-basis:82vw}
  .hero-stats{gap:22px; flex-wrap:wrap}
  .band{padding:40px 26px}
  .footer-grid{grid-template-columns:1fr}
  .section{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ==========================================================================
   Package detail — icon spec list + first-session timeline
   ========================================================================== */
.ico{width:19px; height:19px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* Spec list (replaces the thin text-only table) */
.spec-list{display:grid; gap:2px; margin:20px 0 4px}
.spec-row{display:flex; align-items:center; gap:13px; padding:12px 0; border-bottom:1px solid var(--line-soft)}
.spec-row:last-child{border-bottom:0}
.spec-ico{width:36px; height:36px; border-radius:10px; background:var(--surface-2); color:var(--signal);
  display:grid; place-items:center; flex:none}
.spec-row .k{display:block; font-size:.78rem; color:var(--ink-dim); letter-spacing:.03em;
  text-transform:uppercase; font-weight:600; line-height:1.35}
.spec-row .v{display:block; font-size:.95rem; font-weight:600; margin-top:2px; line-height:1.35}
.spec-row .txt{flex:1; min-width:0}

/* Included list with meaningful icons */
.inc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px}
.inc{display:flex; gap:13px; align-items:flex-start; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px}
.inc .spec-ico{width:34px; height:34px; border-radius:9px}
.inc b{display:block; font-size:.93rem; font-weight:600; margin-bottom:2px}
.inc span{font-size:.84rem; color:var(--ink-soft)}

/* First-session timeline */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; margin-top:8px}
.timeline::before{content:""; position:absolute; left:6%; right:6%; top:26px; height:2px;
  background:linear-gradient(90deg,var(--signal) 0%,rgba(255,90,31,.45) 60%,var(--line) 100%)}
.tl-step{position:relative}
.tl-dot{width:54px; height:54px; border-radius:16px; background:var(--surface);
  border:1px solid var(--line); color:var(--signal); display:grid; place-items:center;
  margin-bottom:16px; position:relative; z-index:1}
.tl-dot .ico{width:23px; height:23px}
.tl-step .when{font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--signal); margin-bottom:6px}
.tl-step h3{font-size:1.02rem; margin-bottom:7px}
.tl-step p{font-size:.89rem; color:var(--ink-soft)}

/* Reassurance strip */
.assure{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:38px}
.assure div{display:flex; gap:12px; align-items:center; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px}
.assure .spec-ico{color:var(--accent); background:var(--accent-dim)}
.assure b{font-size:.9rem; display:block}
.assure span{font-size:.82rem; color:var(--ink-soft)}

@media (max-width:1000px){
  .timeline{grid-template-columns:1fr 1fr; gap:26px}
  .timeline::before{display:none}
  .assure{grid-template-columns:1fr}
}
@media (max-width:720px){
  .inc-grid{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr}
}

/* ==========================================================================
   Header utilities — search / account / cart, and the search overlay
   ========================================================================== */
.icon-btn{position:relative; width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer;
  text-decoration:none; transition:background .15s,border-color .15s,color .15s}
.icon-btn:hover{background:var(--signal); border-color:var(--signal); color:#fff}
.icon-btn .ico{width:19px; height:19px}
.cart-count{position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px;
  background:var(--signal); color:#fff; border-radius:100px; font-size:.68rem; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--ground)}
.icon-btn:hover .cart-count{background:var(--ink); color:var(--ground)}

.search-overlay{position:fixed; inset:0; z-index:200; background:rgba(6,8,11,.82);
  backdrop-filter:blur(6px); padding:80px 20px; overflow-y:auto}
.search-overlay[hidden]{display:none}
.search-box{max-width:640px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.search-head{display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line)}
.search-head .ico{width:20px; height:20px; color:var(--ink-dim); flex:none}
.search-head input{border:0; background:none; padding:0; font-size:1.05rem; color:var(--ink)}
.search-head input:focus{outline:none}
#search-close{background:none; border:1px solid var(--line); color:var(--ink-soft); border-radius:var(--r);
  padding:4px 9px; font-size:.74rem; cursor:pointer; font-family:inherit; flex:none}
#search-close:hover{color:var(--ink); border-color:var(--ink-soft)}
.search-results{max-height:56vh; overflow-y:auto; padding:8px}
.search-results h4{font-size:.7rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-dim);
  padding:14px 12px 8px; display:flex; gap:8px; align-items:center}
.search-results h4 span{background:var(--surface-2); border-radius:100px; padding:1px 7px; font-size:.68rem; letter-spacing:0}
.sr-row{display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:var(--r);
  text-decoration:none; color:inherit; transition:background .12s}
.sr-row:hover{background:var(--surface-2)}
.sr-ic{width:34px; height:34px; border-radius:9px; background:var(--surface-2); color:var(--signal);
  display:grid; place-items:center; flex:none}
.sr-txt{flex:1; min-width:0}
.sr-txt b{display:block; font-size:.93rem; font-weight:600}
.sr-txt span{font-size:.81rem; color:var(--ink-soft)}
.sr-price{font-family:var(--font-display); font-weight:800; font-size:1rem; letter-spacing:-.02em}
.sr-hint{padding:26px 14px; color:var(--ink-dim); font-size:.9rem; text-align:center}

@media (max-width:720px){
  .search-overlay{padding:60px 14px}
  .header-tail .btn{display:none}
}