/* Heliox Shop — phone and tablet finish (W-01).
   Loaded last. Desktop layout above 1050px is unchanged apart from the header wrapper below,
   which keeps the same visual order: logo · navigation · search · country · language · theme. */

/* ---------- Header structure (all widths) ---------- */
.header-menu{display:contents}
.top-nav{order:1}
.header-tools{order:2}
.header-prefs{order:3;display:flex;align-items:center;gap:9px;margin-left:-8px}
.pref-item{display:flex;min-width:0}
.menu-search,.menu-heading,.pref-label{display:none}
.search-submit .ico-narrow{display:none}
.search-submit>span{display:inline-flex;align-items:center}

/* ---------- Phones and tablets: logo + ☰ only, everything else in the menu ---------- */
@media (max-width:1050px){
  .header-tools .mobile-menu{display:grid;width:44px;min-width:44px;height:44px;border-radius:12px}
  .header-menu,.header-menu.show .top-nav{order:0}
  .header-menu{display:none}
  .header-menu.show{
    display:flex;flex-direction:column;gap:16px;
    position:absolute;top:100%;left:0;right:0;
    max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px);
    overflow-y:auto;overscroll-behavior:contain;
    padding:16px max(16px,calc((100% - 640px)/2)) 24px;
    background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 26px 44px rgba(6,30,26,.16)
  }
  .header-menu.show .top-nav{display:flex;position:static;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:0;background:none;border:0;box-shadow:none}
  .header-menu .top-nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:12px;font-size:16px;font-weight:620;color:var(--ink)}
  .header-menu .top-nav a.active{background:var(--surface2);font-weight:760}
  .menu-search{display:flex;align-items:center;gap:8px;height:52px;padding:4px 4px 4px 14px;border:1px solid var(--line);border-radius:14px;background:var(--input);color:var(--muted)}
  .menu-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--ink)}
  .menu-search .btn{width:44px;height:44px;padding:0;border-radius:11px}
  .header-prefs{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0;padding-top:16px;border-top:1px solid var(--line)}
  .menu-heading{display:block;font-size:11px;font-weight:780;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
  .pref-item{flex-direction:column;gap:6px}
  .pref-label{display:block;font-size:13px;font-weight:650;color:var(--muted)}
  .header-prefs .country-select,.header-prefs .language-select{width:100%;max-width:none;height:48px;padding:0 12px;border-radius:12px;font-weight:620}
  .header-prefs .theme-toggle{display:flex;justify-content:flex-start;gap:10px;width:100%;height:48px;padding:0 14px;border-radius:12px}
  .theme-toggle .pref-label{display:inline;font-size:15px;color:var(--ink)}

  /* iPhone Safari zooms into any field under 16px; keep every field at 16px. */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
}

@media (max-width:580px){
  .site-header{height:62px}
  .header-inner{gap:10px}
  .wordmark{gap:8px}
  .wordmark span{display:inline;max-width:none;overflow:visible;font-size:17px}
  .logo-svg{width:30px;height:33px}
  .header-menu.show{max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px)}

  /* Bigger, easier taps */
  .btn{min-height:44px}
  .btn-xs{min-height:40px}

  /* ---------- Home ---------- */
  .hero{height:auto;margin-top:12px;border-radius:20px}
  .hero-content{padding:28px 20px 6px}
  .hero .eyebrow{margin-bottom:18px}
  .hero h1{font-size:36px;line-height:1.08;margin-bottom:14px}
  .hero .lead{margin-bottom:20px}
  .hero-footer{position:static;display:flex;flex-wrap:wrap;gap:8px 16px;padding:14px 20px 22px}
  .search-main{height:56px;padding:5px 5px 5px 14px;gap:9px}
  .search-main button{height:46px}
  .hero-chips button{min-height:34px;padding:6px 12px;font-size:12px}
  .section-heading{display:block}
  .section-heading>*:last-child:not(:first-child){display:inline-flex;margin-top:10px}

  /* Search buttons: magnifier only, so the field gets the room */
  .search-submit{width:46px;min-width:46px;padding:0!important;gap:0}
  .search-submit .btn-label,.search-submit .ico-wide{display:none!important}
  .search-submit .ico-narrow{display:inline-flex}

  /* ---------- Page heads ---------- */
  .page-head h1{font-size:28px;line-height:1.12}
  .page-search{height:56px;padding:5px 5px 5px 14px;margin-top:16px}
  .page-search .search-submit{height:46px}

  /* ---------- Search results ---------- */
  .filter-bar{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .filter-bar .pills{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filter-bar .pill{justify-content:center;min-height:44px;font-size:13px}
  .filter-bar .count-tag{align-self:flex-start;font-size:12px}
  .results-top h2{font-size:20px}

  /* ---------- Store cards (search + directory): compact, logo beside the name ---------- */
  .world-card{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;grid-template-areas:"logo body save";column-gap:12px;align-items:start;min-height:0;padding:14px 12px 14px 14px;border-radius:16px}
  .world-card-top{display:contents}
  .world-card .world-logo{grid-area:logo;width:48px;height:48px;min-width:48px;border-radius:13px;padding:6px}
  .world-card .world-logo.is-initial{padding:0}
  .world-logo.is-initial .initial{font-size:21px}
  .world-card .world-save{grid-area:save;justify-self:end;width:44px;min-width:44px;height:44px;margin:-6px -4px 0 0;border-radius:12px}
  .world-card-content{grid-area:body;min-width:0}
  .world-card h3{font-size:16px;margin:2px 0 2px}
  .world-card p{margin:0 0 8px;font-size:12px}
  .world-card-bottom{padding-top:10px;font-size:12px;line-height:1.35}
  .world-grid{gap:10px}

  /* ---------- Store directory ---------- */
  .world-hero{padding:22px 20px;border-radius:20px;gap:14px;min-height:0}
  .world-hero h1{font-size:30px;margin:10px 0 8px}
  .world-hero p{margin-bottom:0}
  .world-hero .btn{display:none}
  .world-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .world-metrics>div:not(.world-no-feed){min-height:0;padding:10px 8px;gap:4px;border-radius:12px}
  .world-metrics strong{font-size:19px}
  .world-metrics span{font-size:10px}
  .world-no-feed{padding:2px 0 0}
  .world-filters{padding:14px;margin-top:14px;border-radius:18px}
  .world-filter-grid{gap:12px}
  .world-filter-grid input,.world-filter-grid select{height:48px;border-radius:12px}
  .world-filters:not(.is-open) .world-filter-grid>label:not(:first-child),
  .world-filters:not(.is-open) .world-filter-actions{display:none}
  .world-filter-bottom{margin-top:12px;gap:10px}
  .world-filter-toggle{display:flex;width:100%;justify-content:center}
  .world-filter-toggle .filter-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:var(--surface);font-size:11px}
  .world-tab{min-height:44px;font-size:13px}
  .world-filter-actions .btn{min-height:46px}
  .world-result-head{margin:26px 0 12px}
  .world-pagination{gap:8px}
  .world-pagination .btn{min-height:44px;padding:0 14px;font-size:13px}
  .world-pagination span{font-size:13px}

  /* ---------- Categories ---------- */
  .taxonomy-grid{gap:10px}
  .taxonomy-card button{min-height:72px;padding:14px 16px}
  .taxonomy-label strong{font-size:16px}
  .category-forward{font-size:12px;white-space:nowrap}

  /* ---------- Nearby ---------- */
  .nearby-controls{padding:16px;gap:12px;margin:18px 0}
  .nearby-form-row{flex-direction:row;gap:8px}
  .nearby-form-row input{height:48px}
  .nearby-form-row .search-submit{height:48px;width:48px;min-width:48px}
  .nearby-controls>.btn{width:100%;min-height:46px}
  .nearby-summary{flex-direction:column;gap:4px}
  .nearby-summary span{overflow-wrap:anywhere}
  .nearby-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .nearby-actions>*{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:13px}
  .nearby-actions>:only-child{grid-column:1/-1}
  .nearby-actions .link-arrow{border:1px solid var(--line);border-radius:10px}

  /* ---------- Offers (no feed yet) ---------- */
  .feature-panel{padding:22px;gap:0;min-height:0}
  .feature-panel h2{font-size:26px}
  .offers-page .feature-steps{display:none}

  /* ---------- Footer ---------- */
  .site-footer{margin-top:44px;padding:20px 0 30px;font-size:12px}
  .footer-legal{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin:10px 0}
  .footer-legal a{display:flex;align-items:center;min-height:44px;font-size:14px}
}

@media (max-width:360px){
  .hero h1{font-size:32px}
  .world-hero h1{font-size:27px}
}

/* Search button icons stay white on every background (the hero gives svgs a grey colour) */
.search-submit svg{color:currentColor}

/* ---------- Simpler, app-like phone layout (owner feedback, 26 Oct 2026) ---------- */
.tab-bar,.mobile-search{display:none}
@media (max-width:1050px){
  .header-tools .mobile-search{display:grid;width:44px;min-width:44px;height:44px;border-radius:12px}
}
@media (max-width:720px){
  /* Bottom navigation bar */
  .tab-bar{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--line)
  }
  .tab-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:12px;color:var(--muted);font-size:11px;font-weight:650;line-height:1.1;text-align:center}
  .tab-bar a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
  .tab-bar a.active{color:var(--accent)}
  .tab-bar a.active svg{background:var(--soft);border-radius:10px;box-sizing:content-box;padding:3px 12px}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  /* Pages live in the bottom bar; the ☰ menu keeps search and preferences */
  .header-menu .top-nav{display:none!important}
  .header-prefs{border-top:0;padding-top:0}

  /* Less text */
  .breadcrumbs,.page-head p,.results-top p,.world-hero p,.world-hero .eyebrow,.world-no-feed,
  .section-heading p,.hero .eyebrow,.hero .lead,.hero-chips,.hero-footer,
  #how,.cta-panel,.filter-bar .pills,.world-result-head .eyebrow,.page-head .eyebrow{display:none!important}
  .page{padding-top:18px}
  .page-head{margin-bottom:16px}

  /* Home: title + search, then compact categories */
  .hero-content{padding:26px 18px 22px}
  .hero h1{font-size:30px;margin-bottom:18px}
  .section{margin-top:28px}
  .section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
  .section-heading h2{font-size:22px}
  .section-heading .eyebrow{display:none}
  .section-heading>*:last-child:not(:first-child){margin-top:0}
  .category-grid{gap:8px}
  .category-card{display:flex;align-items:center;gap:10px;min-height:60px;padding:10px 12px;border-radius:14px;box-shadow:none}
  .category-card .category-icon{width:38px;height:38px;min-width:38px;margin:0;border-radius:11px}
  .category-card strong{font-size:14px;line-height:1.25}
  .category-card span:not(.category-icon){display:none}

  /* Store directory: just the title, search and the list */
  .world-hero{display:block;padding:20px 18px;background:linear-gradient(126deg,#062e2c,#095145)}
  .world-hero:after{display:none}
  .world-hero h1{font-size:26px;margin:0}
  .world-metrics{display:none}

  /* Search results */
  .filter-bar{margin-bottom:6px}
  .world-disclaimer{margin-top:24px;padding:14px;font-size:11px}

  /* Short footer: copyright + legal links only */
  .site-footer{margin-top:32px;padding:18px 0 20px;text-align:center}
  .footer-inner>div>strong,.footer-long,.footer-extra{display:none}
  .footer-inner p{margin:0 0 6px}
  .footer-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;margin:0}
  .footer-legal a{min-height:36px;padding:0 8px;font-size:13px}
}

/* Legal pages live in the ☰ menu on phones and tablets; footer removed on phones */
.menu-info{display:none}
@media (max-width:1050px){
  .menu-info{order:4;display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line)}
  .menu-info .footer-legal{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
  .menu-info .footer-legal a{display:flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;font-size:14px;font-weight:620;color:var(--ink);background:var(--surface)}
}
@media (max-width:720px){
  .site-footer{display:none}
  .page{padding-bottom:12px}
}
/* Nearby on phones: cards stay; directions sheet slides from the bottom (27 Oct 2026) */
@media (max-width:720px){
  .nearby-toolbar{grid-template-columns:1fr 1fr}
  .nearby-toolbar .nt-filter{grid-column:1/-1}
  .nearby-toolbar input,.nearby-toolbar select{height:46px;font-size:16px}
  .nearby-actions [data-nav]{grid-column:1/-1}
  .nearby-more{flex-direction:column;align-items:stretch;text-align:center}
  .nearby-more .btn{min-height:46px}
  .nav-sheet{align-items:flex-end}
  .nav-sheet-panel{width:100%;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .nav-sheet-item{min-height:52px}
}
.nearby-actions .nt-slot{display:none}