/* HYDOUT ST. release-candidate UX layer — 2026-09-03 */
:root{
  --rc-space-1:8px;--rc-space-2:12px;--rc-space-3:16px;--rc-space-4:20px;--rc-space-5:24px;--rc-space-6:32px;--rc-space-7:40px;
  --rc-control:52px;--rc-radius:14px;--rc-panel:#0c0b09;--rc-line:rgba(231,196,106,.20);
}
html{scroll-padding-top:96px}
body{min-width:320px}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}

/* Universal controls: predictable size, contrast and spacing */
.btn,.nav-cta,.checkout-button{
  min-height:var(--rc-control);border-radius:12px;padding:0 22px;
  font-weight:800;line-height:1.15;text-align:center;text-wrap:balance;
}
.btn.primary,.checkout-button{background:linear-gradient(180deg,#e8c86f,#d5a53b)!important;color:#070604!important;border-color:#e7c46a!important;box-shadow:0 10px 28px rgba(212,163,59,.18)}
.btn.primary:hover,.checkout-button:hover{background:linear-gradient(180deg,#f1d787,#e0b44f)!important;transform:translateY(-1px)}
.btn:not(.primary){background:rgba(5,5,5,.82);color:#f7eedf;border-color:rgba(231,196,106,.55);backdrop-filter:blur(10px)}
.btn:not(.primary):hover{background:#15110b;color:var(--champagne)}
.btn:disabled,.checkout-button:disabled{opacity:.48;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* Forms: deliberate vertical rhythm and clear action separation */
.form-shell{padding:clamp(22px,3vw,36px);border-radius:22px}
.form-grid{gap:22px 18px}
.field{gap:9px;min-width:0}
.field input,.field select,.field textarea{border-radius:11px;min-height:52px;padding:13px 14px;background:#080807}
.field textarea{min-height:150px}
.field.full:has(>button),.field.full:has(>.btn){padding-top:8px;gap:14px}
.field.full>.btn{width:100%;margin-top:0}
.form-note{margin-top:10px;line-height:1.55}
.success{margin-top:0;border-radius:10px}

/* Checkout: don't visually glue fields, payment and submit together */
.checkout-card{overflow:visible}
.checkout-form{gap:16px;padding-top:22px}
.checkout-form>label{gap:7px}
.checkout-form input,.checkout-form select,.checkout-form textarea{min-height:52px;padding:13px 14px;border-radius:11px}
.checkout-form textarea{min-height:104px}
.payment-choice{margin:6px 0 2px;gap:10px}
.checkout-button{margin-top:8px!important;width:100%}
.checkout-note{margin:2px 2px 0!important}
.order-success:not(:empty){margin-top:2px;border-radius:10px}
.checkout-totals{margin-top:4px;padding:17px 0}

/* Menu cards: hierarchy optimized for food browsing */
.menu-item,.order-menu-card{isolation:isolate}
.menu-item h3,.order-menu-card h3{overflow-wrap:normal;word-break:normal;text-wrap:balance}
.menu-item-bottom{gap:14px}
.add-cart,.add-cart.compact{
  min-height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px!important;
  padding:0 14px!important;background:rgba(212,163,59,.08)!important;border:1px solid rgba(231,196,106,.30)!important;
  color:var(--champagne)!important;text-decoration:none!important;white-space:nowrap;
}
.add-cart:hover{background:var(--champagne)!important;color:#070604!important}

/* Keep sticky UI from covering content */
.menu-toolbar,.order-filter-row{scroll-margin-top:90px}
#checkout{scroll-margin-top:102px}

/* Desktop and tablet cleanup */
@media (min-width:781px){
  .hero-actions{gap:12px}
  .form-shell .btn{max-width:100%}
  .checkout-card{padding:26px}
}

/* Mobile release layout */
@media (max-width:780px){
  :root{--rc-control:50px;--mobile-header-h:64px}
  html{scroll-padding-top:76px}
  body{padding-bottom:86px!important}
  .container{width:min(var(--max),calc(100% - 28px))}
  .section{padding:58px 0!important}
  .section.compact{padding:44px 0!important}

  /* Header: small, calm, restaurant-app pattern */
  .site-header{height:var(--mobile-header-h)!important;background:rgba(5,5,5,.94)!important;backdrop-filter:blur(18px)!important}
  .nav{min-height:var(--mobile-header-h)!important;height:var(--mobile-header-h);gap:8px}
  .brand-mark{width:38px!important;height:38px!important;font-size:1.08rem!important}
  .brand-text{display:none!important}
  .nav-cta{display:inline-flex!important;min-height:40px!important;height:40px;padding:0 13px!important;font-size:.59rem!important;letter-spacing:.08em!important;border-radius:10px!important;margin-left:auto}
  .nav-cta .cart-badge{min-width:20px;height:20px}
  .menu-toggle{width:40px!important;height:40px!important;flex:0 0 40px!important;margin-left:0!important;border-color:rgba(231,196,106,.16)!important}

  /* Hero CTA should never disappear into imagery */
  .hero-content{padding-bottom:104px!important}
  .hero-actions,.page-hero .hero-actions{gap:10px!important}
  .hero-actions .btn,.page-hero .hero-actions .btn{min-height:50px!important;border-radius:11px!important;font-size:.65rem!important;letter-spacing:.075em!important;background:rgba(5,5,5,.90)}
  .hero-actions .btn.primary,.page-hero .hero-actions .btn.primary{background:linear-gradient(180deg,#e8c86f,#d5a53b)!important}

  /* Inner page buttons: stack when text could squeeze */
  .page-hero .hero-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%;max-width:420px}
  .page-hero .hero-actions .btn{width:100%;padding:0 10px!important}

  /* Forms: comfortable thumb spacing; submit is clearly detached from inputs */
  .form-shell{padding:20px 16px!important;border-radius:18px}
  .form-grid{grid-template-columns:1fr!important;gap:18px!important}
  .field.full{grid-column:auto!important}
  .field{gap:8px}
  .field input,.field select,.field textarea{min-height:52px;font-size:16px!important;padding:13px 13px}
  .field textarea{min-height:132px}
  .field.full:has(>button),.field.full:has(>.btn){padding-top:8px!important;gap:12px!important}
  .field.full>.btn{min-height:52px!important;width:100%!important;margin:0!important}

  /* Menu filter becomes a stable swipeable category strip */
  .page-menu #menu{padding-top:0!important}
  .menu-toolbar{top:var(--mobile-header-h)!important;margin:0 -14px 18px!important;padding:11px 14px 10px!important;background:rgba(7,7,6,.98)!important}
  .menu-toolbar>div:first-child{margin-bottom:9px!important}
  .menu-toolbar h2{font-size:1.75rem!important}
  .menu-filters{gap:7px!important;padding-bottom:4px!important;scrollbar-width:none}
  .menu-filters::-webkit-scrollbar,.order-filter-row::-webkit-scrollbar{display:none}
  .menu-filters button,.order-filter-row button{min-height:38px!important;padding:0 14px!important;font-size:.6rem!important;letter-spacing:.065em!important}

  /* Food menu: full-width card because food imagery sells */
  .menu-catalog{grid-template-columns:1fr!important;gap:16px!important}
  .menu-item{display:block!important;border-radius:17px!important;overflow:hidden!important}
  .menu-item-media{height:auto!important;aspect-ratio:16/10!important;border-right:0!important;border-bottom:1px solid var(--rc-line)!important}
  .menu-item-body{padding:16px!important}
  .menu-item h3{font-size:1.3rem!important;line-height:1.03!important}
  .menu-price{font-size:.9rem!important;white-space:nowrap}
  .menu-item-body p{display:block!important;min-height:0!important;margin:10px 0 14px!important;font-size:.84rem!important;line-height:1.5!important}
  .menu-item-bottom{align-items:center!important;padding-top:13px!important}
  .menu-tags{max-width:54%!important}
  .add-cart{min-height:42px!important;padding:0 13px!important;font-size:.6rem!important}

  /* Order page: app-like list; no cramped or disappearing controls */
  .order-page{padding-top:var(--mobile-header-h)!important}
  .order-head{padding:28px 0 18px!important}
  .order-head h1{font-size:2.6rem!important;line-height:.93!important;margin:7px 0 9px!important}
  .order-layout{width:min(100% - 20px,var(--max))!important;gap:24px!important;padding-top:0!important;padding-bottom:34px!important}
  .order-filter-row{top:var(--mobile-header-h)!important;margin:0 -10px 12px!important;padding:10px!important;background:rgba(7,7,6,.98)!important}
  .order-menu-list{grid-template-columns:1fr!important;gap:11px!important}
  .order-menu-card{grid-template-columns:104px minmax(0,1fr)!important;min-height:144px!important;border-radius:15px!important}
  .order-menu-card>img{min-height:144px!important;height:100%!important;object-position:center!important}
  .order-menu-card>div{padding:13px!important}
  .order-menu-card h3{font-size:1.05rem!important;line-height:1.05!important}
  .order-menu-card p{font-size:.75rem!important;line-height:1.42!important;margin:8px 0 11px!important;-webkit-line-clamp:2}
  .order-menu-card .add-cart{min-height:36px!important;padding:0 11px!important;font-size:.56rem!important}

  /* Checkout becomes a clean final step with breathing room */
  .checkout-card{padding:18px 16px 20px!important;border-radius:18px!important;margin-top:6px!important}
  .checkout-title{padding-bottom:14px!important}
  .checkout-title h2{font-size:2rem!important}
  .cart-lines{margin-bottom:4px}
  .cart-line{padding:15px 0!important;gap:9px!important}
  .checkout-totals{padding:16px 0!important;margin-bottom:2px}
  .checkout-form{gap:15px!important;padding-top:20px!important}
  .checkout-form>label{gap:7px!important}
  .checkout-form input,.checkout-form select,.checkout-form textarea{font-size:16px!important;min-height:52px!important;padding:13px!important}
  .checkout-form textarea{min-height:96px!important}
  .payment-choice{margin-top:3px!important;gap:9px!important}
  .checkout-button{min-height:54px!important;margin-top:9px!important;font-size:.67rem!important;letter-spacing:.075em!important}
  .checkout-note{margin-top:1px!important;line-height:1.55!important}

  /* Bottom app bar: always visible, never sitting on primary page controls */
  .mobile-actions{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;height:60px!important;padding:4px!important;border-radius:18px!important;z-index:1150!important}
  .mobile-actions a{min-height:50px!important;font-size:.58rem!important;border-radius:14px!important}
  .page-order .mobile-actions{display:none!important}
  .mobile-cart-bar{left:8px!important;right:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;min-height:60px!important;border-radius:17px!important;z-index:1150!important}
  .mobile-cart-bar button{min-height:46px!important;border-radius:12px!important;padding:0 16px!important}

  /* Footer won't disappear behind app nav */
  footer{padding-bottom:34px!important}
}

@media(max-width:430px){
  .nav-cta{font-size:.56rem!important;padding:0 11px!important}
  .page-index .hero-actions{grid-template-columns:1fr!important}
  .page-index .hero-actions .btn{display:flex!important}
  .page-index .hero-actions .btn.ghost{display:flex!important}
  .page-hero .hero-actions{grid-template-columns:1fr!important}
  .menu-tags{display:none!important}
  .menu-item-bottom{justify-content:flex-end!important}
  .add-cart{min-width:132px}
  .payment-choice{grid-template-columns:1fr!important}
  .payment-option{min-height:66px!important}
}

@media(max-width:350px){
  .nav-cta{padding-inline:9px!important;letter-spacing:.05em!important}
  .cart-badge{display:none!important}
  .order-menu-card{grid-template-columns:92px minmax(0,1fr)!important}
}