/* ===========================================================================
   Swehealth – mobil, del 3 (2026-11-04): kompakt sidhuvud, startsidans hero,
   swipe-rader, dragspelsfot och träffytor. Hör ihop med vmod
   swehealth_z_mobil_layout.xml (som lägger till knapparna i sidhuvudet,
   hero-blocket på startsidan och dragspelsklasserna i foten) och laddas
   efter app.css. Dator (>= 768px) påverkas inte alls av den här filen.
   Varje avsnitt är fristående och kan tas bort för sig.
   =========================================================================== */

/* Knapparna i sidhuvudet och hero-blocket finns bara på mobil. */
.swh-mh-btn,
#swh-hero {
  display: none;
}

@media (max-width: 767px) {

  /* -------------------------------------------------------------------------
     1. Sidhuvud: en rad som följer med – hamburgare | logo | sök | varukorg
     Tidigare: logo + stor varukorg (60px), sedan den blå raden med sökfält
     och hamburgare, sedan momsraden – ca 2,5 rader innan innehållet.
     ------------------------------------------------------------------------- */
  #header {
    position: sticky;
    top: 0;
    z-index: 1001;
    grid-template-columns: 44px minmax(0, 1fr) 44px auto;
    column-gap: 2px;
    align-items: center;
    min-height: 56px;
    padding: 6px 8px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  }
  #header .logotype {
    justify-self: start;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-left: 4px;
  }
  #header .logotype img {
    width: auto;
    height: 32px;
    max-height: 32px;
    max-width: 150px;
    object-fit: contain;
  }
  .swh-mh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #333;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .swh-mh-btn svg {
    width: 26px;
    height: 26px;
    display: block;
  }
  .swh-mh-btn:active,
  .swh-mh-btn[aria-expanded="true"],
  body.swh-search-open .swh-mh-search {
    background: rgba(38, 116, 186, 0.1);
    color: #2674BA;
  }
  #header .text-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  #cart > a {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  #cart img.icon {
    width: 30px;
    height: 30px;
    max-width: 30px;
    max-height: 30px;
  }
  #cart .badge {
    top: 2px;
    right: 0;
    width: 1.7em;
    padding: .15rem;
    font-size: .7em;
    line-height: 1.3;
  }
  #cart .dropdown-menu {
    max-width: calc(100vw - 16px);
  }
  /* Offertlänken (vmod swehealth_offert_lank) krymper så att allt får plats. */
  #swq-header-link {
    padding: 6px 8px;
    margin-inline-end: 4px;
  }
  #swq-header-link .swq-hl-text {
    display: none;
  }

  /* Den blå raden: inte längre sticky. Sökfältet visas bara när man tryckt
     på förstoringsglaset, hamburgarmenyn fälls ut under sidhuvudet som förut. */
  #site-menu {
    position: static;
    margin: 0 0 10px;
    padding: 0 8px;
    font-size: 1em;
    line-height: 1.4;
  }
  #site-menu > .container {
    flex-wrap: wrap;
  }
  #site-menu .navbar-header {
    flex: 0 0 100%;
    width: 100%;
    float: none;
    display: block;
  }
  #site-menu .navbar-header .navbar-toggle {
    display: none !important;
  }
  #site-menu form[name="search_form"] {
    display: none;
    margin: 8px 0;
    width: 100%;
  }
  body.swh-search-open #site-menu form[name="search_form"] {
    display: block;
  }
  #site-menu form[name="search_form"] .input-group {
    display: flex;
    width: 100%;
  }
  #site-menu form[name="search_form"] input[type="search"] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* under 16px zoomar iOS in sidan */
    border-radius: 8px;
  }
  #site-menu form[name="search_form"] .input-group-icon {
    display: flex;
    align-items: center;
  }
  /* Menyn: större träffytor (minst 44px) för alla rader, även i
     undermenyerna (Produkter, Information, språk, Logga in). */
  #default-menu .navbar-nav > li > a,
  #default-menu .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #default-menu .navbar-nav > li.languages img {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50%;
  }
  #default-menu .dropdown-menu > li.text-center > a {
    justify-content: center;
  }
  #default-menu .navbar-form .form-control {
    font-size: 16px;
    min-height: 44px;
  }

  /* Momsväxlaren under sökfältet (vmod swehealth_price_display) visas bara
     där priser finns att växla: kategori-, produkt- och söksidor. På
     startsidan, informationssidor m.m. ligger den i hamburgarmenyn.
     Inline-stilen i vmod:en sätter display: flex – därför !important. */
  #price-mode-bar {
    display: none !important;
  }
  #header.swh-pg-category ~ #price-mode-bar,
  #header.swh-pg-product ~ #price-mode-bar,
  #header.swh-pg-search ~ #price-mode-bar,
  #header.swh-pg-categories ~ #price-mode-bar,
  #header.swh-pg-manufacturer ~ #price-mode-bar,
  #header.swh-pg-manufacturers ~ #price-mode-bar,
  #header.swh-pg-offert ~ #price-mode-bar {
    display: flex !important;
  }

  /* -------------------------------------------------------------------------
     2. Startsidan: hero först, SEO-texten (#box-intro) efter produkterna.
     Texten ligger kvar på samma plats i HTML – bara visningsordningen ändras.
     #box-metro (välkomstbilden/bannerplatserna) är tom på mobil och lämnade
     bara ett tomt mellanrum.
     ------------------------------------------------------------------------- */
  /* index.inc.php sätter #box-metro { display: grid } i en <style> som skrivs
     ut efter den här filen – därför den mer specifika selektorn. */
  #content > #box-metro {
    display: none;
  }
  #content > .fourteen-forty {
    display: flex;
    flex-direction: column;
  }
  #content > .fourteen-forty > * {
    order: 10;
  }
  /* Selektorn måste vara minst lika specifik som "#content > .fourteen-forty > *"
     ovan, annars får hero-blocket order 10 och hamnar sist. */
  #content > .fourteen-forty > #swh-hero,
  #swh-hero {
    display: block;
    order: 0;
    margin: 2px 0 18px;
    padding: 22px 18px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e8f1fa 0%, #f5f8fb 100%);
  }
  #swh-hero .swh-hero-title {
    margin: 0 0 .4em;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
    color: #1f3b5a;
  }
  #swh-hero .swh-hero-text {
    margin: 0 0 1.1em;
    line-height: 1.45;
    color: #333;
  }
  #swh-hero .swh-hero-btns {
    display: flex;
    gap: 10px;
  }
  #swh-hero .swh-hero-btns a {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: .95em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }
  #swh-hero .swh-hero-btn-primary {
    background: #2674BA;
    color: #fff;
  }
  #swh-hero .swh-hero-btn-secondary {
    background: #fff;
    color: #2674BA;
    border: 2px solid #2674BA;
  }
  #content > .fourteen-forty > #box-popular-categories { order: 1; }
  #content > .fourteen-forty > #box-featured-products  { order: 2; }
  #content > .fourteen-forty > #box-campaign-products  { order: 3; }
  #content > .fourteen-forty > #box-latest-products    { order: 4; }
  #content > .fourteen-forty > #box-popular-products   { order: 5; }
  #content > .fourteen-forty > #box-intro              { order: 6; }
  #content > .fourteen-forty > #box-intro h1 {
    font-size: 1.3em;
  }

  /* -------------------------------------------------------------------------
     3. Startsidan: swipe-rader i stället för 14 skärmar med kort.
     Populära kategorier och produktsektionerna blir horisontella rader
     (ca 2,3 kort synliga) som man sveper i sidled, med snäpp per kort.
     Gäller bara startsidan (#content > .fourteen-forty) – kategorisidornas
     rutnät är oförändrat.
     ------------------------------------------------------------------------- */
  #content > .fourteen-forty #box-popular-categories .listing.categories,
  #content > .fourteen-forty .listing.products.columns {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 -10px;
    padding: 2px 10px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 10px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  #content > .fourteen-forty #box-popular-categories .listing.categories::-webkit-scrollbar,
  #content > .fourteen-forty .listing.products.columns::-webkit-scrollbar {
    display: none;
  }
  #content > .fourteen-forty .listing.products.columns > .product {
    flex: 0 0 44%;
    min-width: 0;
    scroll-snap-align: start;
  }
  #content > .fourteen-forty #box-popular-categories .listing.categories > .category {
    flex: 0 0 40%;
    min-width: 0;
    scroll-snap-align: start;
  }
  #content > .fourteen-forty .listing.products.columns > .product .preview {
    display: none !important;
  }
  /* Sektionsrubrikerna som på de stora sajterna: tätare mot raden. */
  #content > .fourteen-forty .box > h2,
  #content > .fourteen-forty .card > .card-header {
    margin-bottom: .4em;
  }

  /* -------------------------------------------------------------------------
     4. Foten som dragspel. Kategorier och Konto fällda, Kontakt öppen
     (telefon och e-post är det man letar efter i foten på mobil). Kategorier
     och Kontakt var helt dolda på mobil (hidden-xs) – nu finns de.
     Ramverkets .row är ett 12-kolumners rutnät och Konto är col-xs-6
     (span 6 !important) – därför grid-column med !important.
     ------------------------------------------------------------------------- */
  #footer .row {
    grid-gap: 0;
  }
  #footer .swh-acc {
    grid-column: 1 / -1 !important;
    float: none;
    width: 100%;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  #footer .swh-acc.categories {
    border-top: 0;
  }
  #footer .swh-acc > .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 6px 0;
    border: 0;
    font-size: 1.1em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #footer .swh-acc > .title::after {
    content: "";
    width: 10px;
    height: 10px;
    margin-right: 6px;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
    transform: rotate(45deg);
    transition: transform .2s;
  }
  #footer .swh-acc.swh-acc-open > .title::after {
    transform: rotate(-135deg);
  }
  #footer .swh-acc > .title ~ * {
    display: none;
  }
  #footer .swh-acc.swh-acc-open > .title ~ * {
    display: block;
  }
  #footer .swh-acc ul.list-unstyled {
    margin: 0 0 10px;
  }
  #footer .swh-acc ul.list-unstyled li a {
    display: block;
    min-height: 40px;
    line-height: 40px;
  }
  #footer .swh-acc.contact p {
    margin: 0 0 .6em;
  }
  #footer .swh-acc.contact p a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-weight: 500;
  }
  #footer .row > .col-md-6 {
    grid-column: 1 / -1 !important;
    width: 100%;
  }
  #footer .row > .col-md-6 > .row {
    display: block;
  }
  #footer .row > .col-md-6 > .row > .col-md-12:empty {
    display: none;
  }
  #swh-social a {
    width: 46px;
    height: 46px;
  }
  #copyright .notice {
    padding: 12px 10px calc(12px + env(safe-area-inset-bottom, 0px));
    font-size: 12px;
  }

  /* -------------------------------------------------------------------------
     5. Småsaker: iPhone-hemlinjen och scroll-upp-knappen.
     ------------------------------------------------------------------------- */
  #scroll-up {
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  }
}