/* Page base and order sheet for the ocean-blue Ungil Kall site. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--hibiscus);outline-offset:2px}

.btn{display:block;width:100%;min-height:52px;padding:14px 22px;border:0;border-radius:999px;background:var(--hibiscus);color:var(--night);
  font:800 17px/1.2 var(--font-b);text-align:center;text-decoration:none;cursor:pointer;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 2px currentColor}

.buybar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--abyss);color:#fff;box-shadow:0 -6px 20px rgba(3,40,60,.28)}
.buybar b{display:block;font:800 18px/1.15 var(--font-b)}
.buybar small{display:block;font:500 13px/1.3 var(--font-b);color:var(--shallow)}
.buybar .btn{flex:none;width:auto;min-height:48px}
body{padding-bottom:84px}
@media (min-width:860px){.buybar{display:none}body{padding-bottom:0}}

dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:480px;max-height:92dvh;overflow:auto;background:#fff;color:var(--night);
  border-radius:20px 20px 0 0;font:500 16px/1.45 var(--font-b)}
dialog.sheet::backdrop{background:rgba(3,40,60,.65)}
@media (min-width:600px){dialog.sheet{margin:auto;border-radius:20px}}
.sheet-in{padding:18px 18px calc(20px + env(safe-area-inset-bottom,0px));display:grid;gap:16px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sheet-head h2{margin:0;font:400 23px/1.2 var(--font-d);color:var(--abyss)}
.x{width:44px;height:44px;margin:-8px -8px -8px 0;border:0;background:none;font-size:25px;line-height:1;cursor:pointer}
.prod{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:center}
.prod img{border-radius:4px;box-shadow:0 2px 7px rgba(3,40,60,.3)}
.prod p{margin:0}.prod small{color:var(--mute);display:block;font-size:14px}
.qty{display:flex;align-items:center;justify-content:space-between;gap:12px}
.step{display:flex;align-items:center;border:2px solid var(--edge);border-radius:12px}
.step button{width:48px;height:48px;border:0;background:none;font-size:23px;cursor:pointer}
.step button:disabled{opacity:.28;cursor:default}
.step output{min-width:34px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
.ship{border:0;padding:0;margin:0;display:grid;gap:8px}
.ship legend{padding:0;margin-bottom:8px;font-weight:800}
.ship label{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:12px;border:2px solid var(--edge);border-radius:12px;cursor:pointer}
.ship label:has(input:checked){border-color:var(--ocean);background:var(--foam)}
.ship input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--ocean)}
.ship label.two-col{grid-template-columns:22px minmax(0,1fr)}
.ship .late-note{font-size:13.5px;color:var(--mute)}
.ship small{display:block;color:var(--mute);font-size:13.5px;line-height:1.35}
.ship-one{margin:0;padding:12px;border-radius:12px;background:var(--foam);font-size:14.5px}
.sum{display:grid;gap:6px;margin:0;padding:12px 0 0;border-top:1px solid var(--edge);font-variant-numeric:tabular-nums}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum dt,.sum dd{margin:0}
.sum .tot{font-weight:800;font-size:19px;color:var(--abyss)}
.lock{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--mute);margin:0}
.lock svg{flex:none;margin-top:2px}
.field{display:grid;gap:5px}
.field label{font-size:14px;font-weight:700}
.field input,.field textarea{width:100%;min-height:48px;padding:11px 12px;font-size:16px;background:#fff;border:2px solid var(--edge);border-radius:10px}
.field .err{display:none;color:var(--err);font-size:13.5px}
.field.bad .err{display:block}
.field.bad input{border-color:var(--err)}
.three{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,1fr);gap:10px}
.stripe-tag{margin:0;padding:10px 12px;border-radius:10px;background:var(--foam);font-size:14px;line-height:1.4}
.fake-card{padding:13px 12px;border:2px dashed var(--edge);border-radius:10px;color:var(--mute);font-size:14px}
.done{text-align:center;display:grid;gap:10px;justify-items:center}
.done h3{margin:0;font:400 25px/1.2 var(--font-d);color:var(--abyss)}
.done p{margin:0}
#uk-form{display:grid;gap:12px}

.signup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.signup input[type=email]{min-height:52px;width:100%;padding:11px 16px;font-size:16px;background:#fff;color:var(--night);border:2px solid var(--edge);border-radius:999px}
.signup .btn{width:auto}
.signup-msg{grid-column:1/-1;margin:0;font-size:14px;min-height:1.3em}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

details.q{border-top:1px solid var(--edge)}
details.q:last-of-type{border-bottom:1px solid var(--edge)}
details.q summary{cursor:pointer;padding:16px 30px 16px 0;font-weight:800;position:relative;list-style:none}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";position:absolute;right:2px;top:12px;font-size:24px;font-weight:500;color:var(--ocean)}
details.q[open] summary::after{content:"\2212"}
details.q p{margin:0 0 16px;max-width:62ch}