/*
Theme Name: Camera Mart
Theme URI: https://cameramart.co
Author: Camera Mart
Description: Shop, trade-in and repair-booking theme for Camera Mart, Petaling Jaya.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: cameramart
*/


  :root{
    --brand:#E9D04C; --brand-deep:#D4B92F; --brand-soft:#F3E39A; --brand-pale:#FBF4D6;
    --ink:#0D0D0D; --graphite:#2E2E2C; --mute:#6A6A62;
    --paper:#FFFFFF; --fog:#F4F3EE; --line:#DEDCD2; --line-soft:#EDEBE3;
    --red:#C0392B;
    --sans:"Montserrat",system-ui,sans-serif;
    --wrap:1280px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--fog);color:var(--ink);font-family:var(--sans);
    font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit}
  .wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
  h1,h2,h3{margin:0;letter-spacing:-0.02em;line-height:1.15}
  :focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* ---------- utility bar ---------- */
  .util{background:var(--ink);color:#B5B3A8;font-size:12.5px}
  .util .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;height:38px}
  .util a:hover{color:var(--brand)}
  .util .sp{margin-left:auto}

  /* ---------- header ---------- */
  .masthead{background:var(--brand);border-bottom:2px solid var(--ink)}
  .masthead .wrap{display:flex;align-items:center;gap:26px;padding-top:16px;padding-bottom:16px}
  .brandmark{display:flex;align-items:center;gap:11px;flex:none}
  .brandmark img{height:38px;width:auto}
  .brandmark b{font-size:21px;font-weight:700;letter-spacing:-0.03em;display:block;line-height:1}
  .brandmark span{font-size:10.5px;font-weight:600;letter-spacing:.14em;color:#5A5223}
  .searchbox{flex:1;display:flex;max-width:620px;border:2px solid var(--ink);background:#fff}
  .searchbox input{flex:1;border:0;padding:12px 14px;font-size:14.5px;font-family:inherit;outline:none;background:transparent}
  .searchbox button{border:0;background:var(--ink);color:var(--brand);padding:0 20px;
    font-weight:600;font-size:14px;cursor:pointer}
  .searchbox button:hover{background:#000}
  .headlinks{display:flex;gap:18px;margin-left:auto;font-size:13px;font-weight:600;flex:none}
  .headlinks a:hover{text-decoration:underline}

  /* ---------- nav ---------- */
  .nav{background:var(--ink);position:sticky;top:0;z-index:60}
  .nav .wrap{display:flex;align-items:stretch;gap:2px}
  .nav a,.nav button{color:#EFEDE4;font-size:13.5px;font-weight:600;padding:14px 15px;
    background:none;border:0;cursor:pointer;letter-spacing:.01em}
  .nav a:hover,.nav button:hover{background:#242420;color:var(--brand)}
  .nav .allcat{background:var(--brand);color:var(--ink)}
  .nav .allcat:hover{background:var(--brand-deep);color:var(--ink)}
  .nav .hot{color:var(--brand)}
  .navtoggle{display:none}

  /* ---------- slider ---------- */
  .slider{position:relative;overflow:hidden;background:var(--ink)}
  .slides{display:flex;transition:transform .5s ease}
  .slide{min-width:100%;padding:56px 0;color:#fff}
  .slide .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
  .slide h2{font-size:clamp(26px,3.6vw,42px);font-weight:700;letter-spacing:-0.03em}
  .slide p{margin:14px 0 24px;color:#C9C6BA;max-width:46ch;font-size:16px}
  .slide.yellow{background:var(--brand);color:var(--ink)}
  .slide.yellow p{color:#4C4622}
  .slide.pale{background:var(--brand-pale);color:var(--ink)}
  .slide.pale p{color:#5C5A50}
  .kicker{font-size:12px;font-weight:700;letter-spacing:.14em;margin-bottom:12px;opacity:.75}
  .slide-art{display:grid;place-items:center}
  .slide-art svg{width:min(300px,80%);height:auto}
  .dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px}
  .dots button{width:9px;height:9px;padding:0;border-radius:50%;border:1.5px solid var(--ink);
    background:transparent;cursor:pointer}
  .dots button[aria-current="true"]{background:var(--ink)}
  .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(13,13,13,.55);
    color:#fff;border:0;width:38px;height:52px;cursor:pointer;font-size:18px}
  .arrow:hover{background:var(--ink)}
  .arrow.prev{left:0} .arrow.next{right:0}

  /* ---------- trust strip ---------- */
  .trust{background:var(--paper);border-bottom:1px solid var(--line)}
  .trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft)}
  .trust div{background:var(--paper);padding:18px 16px}
  .trust b{display:block;font-size:14px;font-weight:700}
  .trust span{font-size:12.5px;color:var(--mute)}

  /* ---------- layout ---------- */
  .shell{display:grid;grid-template-columns:250px 1fr;gap:26px;padding:26px 0 60px}
  aside{align-self:start;position:sticky;top:60px}
  .panel{background:var(--paper);border:1px solid var(--line);margin-bottom:16px}
  .panel h3{font-size:12.5px;font-weight:700;letter-spacing:.1em;background:var(--ink);
    color:var(--brand);padding:11px 14px}
  .panel .body{padding:12px 14px}
  .catlist{list-style:none;margin:0;padding:0;font-size:13.5px}
  .catlist>li{border-bottom:1px solid var(--line-soft)}
  .catlist>li:last-child{border-bottom:0}
  .catlist button{width:100%;text-align:left;background:none;border:0;padding:10px 14px;
    cursor:pointer;font-size:13.5px;font-weight:600;display:flex;justify-content:space-between;gap:10px}
  .catlist button:hover{background:var(--brand-pale)}
  .catlist button[aria-pressed="true"]{background:var(--brand);}
  .catlist .n{color:var(--mute);font-weight:500}
  .checks{display:flex;flex-direction:column;gap:9px;max-height:230px;overflow:auto;font-size:13.5px}
  .checks label{display:flex;gap:9px;align-items:center;cursor:pointer}
  .checks input{accent-color:var(--ink);width:15px;height:15px}
  .clearbtn{width:100%;margin-top:12px;padding:9px;background:var(--ink);color:var(--brand);
    border:0;font-weight:600;font-size:13px;cursor:pointer}

  /* ---------- product area ---------- */
  .toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;background:var(--paper);
    border:1px solid var(--line);padding:12px 16px;margin-bottom:16px}
  .toolbar h1{font-size:19px;font-weight:700}
  .count{font-size:13px;color:var(--mute)}
  .toolbar .sp{margin-left:auto}
  select{font-family:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);
    background:var(--paper);border-radius:0}
  .active-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
  .active-tags button{font-size:12.5px;font-weight:600;background:var(--brand);border:1px solid var(--ink);
    padding:5px 10px;cursor:pointer}

  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;
    position:relative}
  .card:hover{border-color:var(--ink)}
  .shot{background:var(--brand-pale);aspect-ratio:1/1;display:grid;place-items:center;padding:16px}
  .shot svg{width:78%;height:auto}
  .badge{position:absolute;top:0;left:0;font-size:10.5px;font-weight:700;letter-spacing:.04em;
    padding:5px 9px;z-index:2}
  .badge.new{background:var(--ink);color:var(--brand)}
  .badge.used{background:var(--brand);color:var(--ink);border-right:1px solid var(--ink);
    border-bottom:1px solid var(--ink)}
  .badge.sale{background:var(--red);color:#fff}
  .card .info{padding:12px 13px 14px;display:flex;flex-direction:column;flex:1}
  .cbrand{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--mute);margin-bottom:5px}
  .cname{font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:6px}
  .cspec{font-size:12px;color:var(--mute);line-height:1.4;margin:0 0 12px}
  .stock{font-size:11.5px;font-weight:600;margin-bottom:9px}
  .stock.in{color:#1E7A45} .stock.low{color:#B26A00} .stock.order{color:var(--mute)}
  .pricebox{margin-top:auto}
  .pricebox .now{font-size:17px;font-weight:700;letter-spacing:-0.02em}
  .pricebox .was{font-size:12.5px;color:#9A988E;text-decoration:line-through;margin-left:7px}
  .buy{display:block;text-align:center;margin-top:11px;background:var(--brand);color:var(--ink);
    border:1.5px solid var(--ink);padding:9px;font-size:12.5px;font-weight:700}
  .buy:hover{background:var(--ink);color:var(--brand)}
  .noresult{grid-column:1/-1;background:var(--paper);border:1px solid var(--line);padding:48px;
    text-align:center;color:var(--mute)}

  /* ---------- sections ---------- */
  .band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:44px 0}
  .band.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
  .band.yellow{background:var(--brand);border-color:var(--ink)}
  .sechead{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
  .sechead h2{font-size:22px;font-weight:700}
  .sechead a{font-size:13px;font-weight:600;margin-left:auto;border-bottom:2px solid var(--brand)}
  .brandrow{display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
  .brandrow a{background:var(--fog);border:1px solid var(--line);padding:16px 8px;text-align:center;
    font-size:13px;font-weight:700;letter-spacing:.02em}
  .brandrow a:hover{background:var(--brand);border-color:var(--ink)}

  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .review{background:var(--fog);border:1px solid var(--line);padding:18px}
  .stars{color:var(--brand-deep);font-size:14px;letter-spacing:2px}
  .review p{font-size:13.5px;margin:9px 0 12px;color:var(--graphite)}
  .review b{font-size:13px}
  .review span{font-size:12px;color:var(--mute);display:block}

  .repairgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px}
  .steps{counter-reset:s;list-style:none;margin:0;padding:0}
  .steps li{counter-increment:s;display:grid;grid-template-columns:32px 1fr;gap:14px;padding:13px 0;
    border-bottom:1px solid rgba(13,13,13,.2)}
  .steps li::before{content:counter(s);width:26px;height:26px;display:grid;place-items:center;
    background:var(--ink);color:var(--brand);border-radius:50%;font-size:12.5px;font-weight:700}
  .steps b{font-size:14.5px} .steps p{margin:2px 0 0;font-size:13px;color:#4C4622}
  table.svc{width:100%;border-collapse:collapse;font-size:13.5px}
  table.svc th{text-align:left;font-size:12px;letter-spacing:.06em;padding-bottom:9px;
    border-bottom:2px solid var(--ink)}
  table.svc td{padding:11px 0;border-bottom:1px solid rgba(13,13,13,.2)}
  table.svc td:nth-child(2),table.svc th:nth-child(2){text-align:right;font-weight:700;white-space:nowrap}
  table.svc td:nth-child(3),table.svc th:nth-child(3){text-align:right;white-space:nowrap;color:#4C4622}

  .grades{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .grade{border-top:5px solid #C9A81B;padding-top:13px}
  .grade:nth-child(2){border-top-color:var(--brand)}
  .grade:nth-child(3){border-top-color:var(--brand-soft)}
  .grade:nth-child(4){border-top-color:var(--brand-pale)}
  .grade b{font-size:14.5px} .grade p{margin:6px 0 0;font-size:13px;color:var(--mute)}

  .places{display:flex;flex-wrap:wrap;gap:10px}
  .places a{border:1px solid var(--line);background:var(--fog);padding:10px 16px;font-size:13px;
    font-weight:600}
  .places a:hover{background:var(--brand);border-color:var(--ink)}

  /* ---------- footer ---------- */
  footer{background:var(--ink);color:#9C9A90;font-size:13px}
  .fmain{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px;padding:44px 0 34px}
  .fmain h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.08em;margin:0 0 14px}
  .fmain ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  .fmain a:hover{color:var(--brand)}
  .fmain img{height:64px;width:auto;filter:invert(1);margin-bottom:14px}
  .news{display:flex;border:1px solid #3A3A34;margin-top:12px}
  .news input{flex:1;background:transparent;border:0;color:#fff;padding:10px 12px;
    font-family:inherit;font-size:13px;outline:none}
  .news button{background:var(--brand);color:var(--ink);border:0;padding:0 16px;font-weight:700;
    font-size:12.5px;cursor:pointer}
  .legal{border-top:1px solid #26261F;padding:16px 0;display:flex;flex-wrap:wrap;gap:10px 22px;
    font-size:12px}
  .legal .sp{margin-left:auto}

  .wa{position:fixed;right:18px;bottom:18px;z-index:80;background:#25D366;color:#fff;
    width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
    box-shadow:0 6px 18px rgba(0,0,0,.25)}
  .wa svg{width:30px;height:30px;fill:#fff}

  /* ---------- cart ---------- */
  .cartbtn{position:relative;display:flex;align-items:center;gap:9px;background:var(--ink);
    color:var(--brand);border:0;padding:10px 15px;cursor:pointer;font-size:13px;font-weight:700;flex:none}
  .cartbtn:hover{background:#000}
  .cartbtn svg{width:21px;height:21px;fill:none;stroke:var(--brand);stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .cartbtn .cnum{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;padding:0 5px;
    background:var(--red);color:#fff;border-radius:11px;font-size:11.5px;font-weight:700;
    display:grid;place-items:center;border:2px solid var(--brand)}
  .cartbtn .cnum[hidden]{display:none}

  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:90;opacity:0;
    pointer-events:none;transition:opacity .25s}
  .overlay.show{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;height:100%;width:390px;max-width:92vw;background:var(--paper);
    z-index:95;display:flex;flex-direction:column;transform:translateX(101%);
    transition:transform .3s ease;border-left:2px solid var(--ink)}
  .drawer.show{transform:none}
  .dhead{background:var(--brand);border-bottom:2px solid var(--ink);padding:15px 18px;
    display:flex;align-items:center;gap:12px}
  .dhead h2{font-size:16px;font-weight:700;flex:1}
  .dhead button{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
  .citems{flex:1;overflow:auto;padding:6px 18px}
  .citem{display:grid;grid-template-columns:58px 1fr;gap:12px;padding:15px 0;
    border-bottom:1px solid var(--line-soft)}
  .citem .thumb{background:var(--brand-pale);display:grid;place-items:center;height:58px;padding:7px}
  .citem .cn{font-size:13px;font-weight:600;line-height:1.35}
  .citem .cb{font-size:10.5px;font-weight:700;letter-spacing:.07em;color:var(--mute);margin-bottom:3px}
  .citem .cp{font-size:13px;font-weight:700;margin-top:5px}
  .qty{display:flex;align-items:center;gap:0;margin-top:9px}
  .qty button{width:28px;height:28px;border:1px solid var(--line);background:var(--paper);
    cursor:pointer;font-size:15px;font-weight:700;line-height:1}
  .qty button:hover{background:var(--brand)}
  .qty span{min-width:34px;text-align:center;font-size:13px;font-weight:700;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);height:28px;
    display:grid;place-items:center}
  .qty .rm{margin-left:auto;border:0;background:none;font-size:11.5px;font-weight:600;
    color:var(--mute);text-decoration:underline;width:auto;padding:0 2px}
  .qty .rm:hover{color:var(--red);background:none}
  .dempty{padding:50px 20px;text-align:center;color:var(--mute);font-size:13.5px}
  .dfoot{border-top:2px solid var(--ink);padding:16px 18px;background:var(--fog)}
  .dline{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);
    padding:3px 0}
  .dtotal{display:flex;justify-content:space-between;align-items:baseline;
    font-size:18px;font-weight:700;padding:8px 0 4px;border-top:1px solid var(--line);margin-top:8px}
  .dnote{font-size:11.5px;color:var(--mute);margin:6px 0 14px;line-height:1.45}
  .dcheckout{display:block;text-align:center;background:#25D366;color:#fff;border:0;width:100%;
    padding:14px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer}
  .dcheckout:hover{background:#1DB255}
  .dcont{display:block;width:100%;margin-top:9px;background:none;border:0;font-family:inherit;
    font-size:12.5px;font-weight:600;color:var(--mute);cursor:pointer;text-decoration:underline}

  .cardbtns{display:flex;gap:7px;margin-top:11px}
  .add{flex:1;background:var(--brand);color:var(--ink);border:1.5px solid var(--ink);padding:9px 6px;
    font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
  .add:hover{background:var(--ink);color:var(--brand)}
  .add.done{background:var(--ink);color:var(--brand)}
  .askwa{flex:none;width:38px;border:1.5px solid var(--line);display:grid;place-items:center}
  .askwa:hover{border-color:var(--ink);background:var(--brand-pale)}
  .askwa svg{width:17px;height:17px;fill:var(--graphite)}

  @media (max-width:1080px){
    .grid{grid-template-columns:repeat(3,1fr)}
    .brandrow{grid-template-columns:repeat(4,1fr)}
    .fmain{grid-template-columns:1fr 1fr}
  }
  @media (max-width:900px){
    .shell{grid-template-columns:1fr}
    aside{position:static}
    .masthead .wrap{flex-wrap:wrap;gap:14px}
    .searchbox{order:3;flex-basis:100%;max-width:none}
    .headlinks{margin-left:auto}
    .slide .wrap{grid-template-columns:1fr}
    .slide-art{display:none}
    .trust .wrap{grid-template-columns:repeat(2,1fr)}
    .repairgrid{grid-template-columns:1fr;gap:34px}
    .reviews{grid-template-columns:1fr}
    .grades{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:640px){
    .grid{grid-template-columns:repeat(2,1fr)}
    .util .wrap{height:auto;padding-top:8px;padding-bottom:8px}
    .nav .wrap{flex-wrap:wrap}
    .nav{position:static}
    .fmain{grid-template-columns:1fr}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

  /* ---------- page header / forms ---------- */
  .pagehead{background:var(--ink);color:#fff;padding:46px 0 40px}
  .pagehead h1{font-size:clamp(28px,4vw,42px);font-weight:700;letter-spacing:-0.03em}
  .pagehead p{margin:14px 0 0;color:#B5B3A8;max-width:60ch;font-size:16px}
  .crumb{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--brand);margin-bottom:14px}
  .crumb a:hover{text-decoration:underline}

  .formshell{display:grid;grid-template-columns:1fr 340px;gap:26px;padding:30px 0 60px;align-items:start}
  form.card2{background:var(--paper);border:1px solid var(--line);padding:26px}
  fieldset{border:0;padding:0;margin:0 0 26px}
  fieldset legend{font-size:12.5px;font-weight:700;letter-spacing:.1em;padding:0 0 14px;
    color:var(--ink);border-bottom:2px solid var(--brand);width:100%;margin-bottom:18px}
  .fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .f{display:flex;flex-direction:column;gap:6px}
  .f.wide{grid-column:1/-1}
  .f label{font-size:12.5px;font-weight:700}
  .f .hint{font-size:11.5px;color:var(--mute);font-weight:500}
  .f input,.f select,.f textarea{font-family:inherit;font-size:14px;padding:11px 12px;
    border:1px solid var(--line);background:var(--paper);border-radius:0;width:100%}
  .f textarea{min-height:110px;resize:vertical}
  .f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--ink);outline-offset:-1px}
  .f.bad input,.f.bad select,.f.bad textarea{border-color:var(--red);background:#FDF6F5}
  .err{font-size:11.5px;color:var(--red);font-weight:600;display:none}
  .f.bad .err{display:block}

  .picks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;grid-column:1/-1}
  .pick{border:1.5px solid var(--line);padding:12px;cursor:pointer;background:var(--paper)}
  .pick:hover{border-color:var(--ink)}
  .pick input{position:absolute;opacity:0;width:0;height:0}
  .pick b{display:block;font-size:13.5px;margin-bottom:3px}
  .pick span{font-size:11.5px;color:var(--mute);line-height:1.4;display:block}
  .pick.on{border-color:var(--ink);background:var(--brand-pale);box-shadow:inset 0 0 0 1px var(--ink)}
  .boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;grid-column:1/-1}
  .boxes label{display:flex;gap:9px;align-items:center;font-size:13px;border:1px solid var(--line);
    padding:10px 12px;cursor:pointer}
  .boxes label:hover{background:var(--brand-pale)}
  .boxes input{accent-color:var(--ink);width:15px;height:15px}

  .submitrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding-top:6px}
  .primary{background:#25D366;color:#fff;border:0;padding:15px 26px;font-family:inherit;
    font-size:14.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
  .primary:hover{background:#1DB255}
  .primary svg{width:19px;height:19px;fill:#fff}
  .secondary{background:none;border:1.5px solid var(--ink);padding:14px 22px;font-family:inherit;
    font-size:14px;font-weight:700;cursor:pointer}
  .secondary:hover{background:var(--brand)}
  .formnote{font-size:12px;color:var(--mute);margin:14px 0 0;max-width:60ch;line-height:1.5}

  .side .panel .body{font-size:13.5px;color:var(--graphite);line-height:1.6}
  .estimate{background:var(--ink);color:#fff;padding:22px}
  .estimate .lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em;color:var(--brand)}
  .estimate .val{font-size:28px;font-weight:700;letter-spacing:-0.03em;margin:8px 0 6px}
  .estimate .sub{font-size:12px;color:#A9A79D;line-height:1.5}
  .quotebox{background:var(--brand);padding:20px;border-bottom:2px solid var(--ink)}
  .quotebox .lbl{font-size:11.5px;font-weight:700;letter-spacing:.1em}
  .quotebox .val{font-size:24px;font-weight:700;margin:6px 0 2px}
  .quotebox .sub{font-size:12.5px;color:#4C4622}
  .hourlist{margin:0;font-size:13.5px}
  .hourlist div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
    border-bottom:1px solid var(--line-soft)}
  .hourlist div:last-child{border-bottom:0}
  .hourlist dt{color:var(--mute)} .hourlist dd{margin:0;font-weight:600}
  .today{background:var(--brand-pale)!important;margin:0 -6px;padding-left:6px!important;
    padding-right:6px!important}

  .ok{display:none;background:var(--paper);border:2px solid var(--ink);padding:30px;margin-bottom:20px}
  .ok.show{display:block}
  .ok h2{font-size:20px;margin-bottom:10px}
  .ok p{margin:0 0 14px;color:var(--mute);font-size:14px}
  .ok pre{background:var(--fog);border:1px solid var(--line);padding:14px;font-size:12.5px;
    font-family:inherit;white-space:pre-wrap;line-height:1.6;margin:0 0 16px}

  @media (max-width:900px){
    .formshell{grid-template-columns:1fr}
    .picks{grid-template-columns:repeat(2,1fr)}
    .boxes{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:640px){
    .fields{grid-template-columns:1fr}
    .picks{grid-template-columns:1fr}
    .boxes{grid-template-columns:1fr}
  }