/* ============================================================================
   HOMES & FLOORS — MOBILES MEGA-MENUE
   Entwurf "Mobile Mega Menu.dc.html", aus der Quelle des Buendels gelesen.
   2026-08-31, v1.11.68
   ----------------------------------------------------------------------------
   WAS SCHON DA WAR. Die Schublade .hfh-mob existiert vollstaendig, samt Kopf,
   Suchformular, Kategorien als <details>-Akkordeon und Fussknoepfen. Der
   Inhalt stimmte bereits mit dem Entwurf ueberein -- Engineered Wood 8,
   Solid Wood 2, Parquet 3, LVT 7, Laminate 5, Tiles & Wall Panels 5,
   Bespoke Oak NEW, Pro Portal, My Account. Diese Datei baut nichts neu; sie
   bringt die vorhandene Schublade auf die Masse des Entwurfs.

   EINE BESTANDSREGEL STEHT NOCH IM WEG, mit !important:

       .hfh-shell .hfh-mob__head-logo img{height:68px!important;max-width:...!important}

   Genau dagegen -- und nur dagegen -- steht in dieser Datei !important, an
   zwei Deklarationen (Logo). Die fruehere zweite Gegnerin, die
   75vw-Breitenregel, ist am 31.08. in header3.css ENTFERNT worden (neue
   Bestellung: volle Breite, 4/4); die Breite hier kommt seither mit blosser
   Spezifitaet aus. Jede andere Regel ebenso (html body ...), damit die
   Datei rueckbaubar bleibt: loeschen, und der Bestand ist zurueck.

   Die dritte Bestandsregel mit !important -- .hfh-mob__search{display:none}
   -- wird seit dem 31.08.2026 NICHT mehr ueberboten: die SUCHLEISTE IST AUF
   BESTELLUNG RAUS ("ohne Suchleiste, die soll weg"), und genau diese Regel
   erledigt das bereits. Der Entwurf zeigt sie; die Bestellung schlaegt den
   Entwurf. Damit entfaellt auch die 16px-iOS-Frage an dieser Stelle -- die
   Regel in header3.css bleibt stehen, relevant erst, falls die Suche
   zurueckkommt.

   Die erste traegt in header3.css den Kommentar "2/3 viewport breite (statt
   full) per User-Request". Sie war also ausdruecklich bestellt. Der neue
   Entwurf und die dazu gelieferten Bildschirmfotos zeigen die volle Breite;
   die Umkehr ist gewollt und steht im Changelog, damit sie nicht als
   Versehen gilt. Gegen !important hilft nur !important -- deshalb steht es
   an genau diesen beiden Stellen und sonst nirgends in dieser Datei.

   EINE BEWUSSTE ABWEICHUNG VOM ENTWURF. Der Entwurf schiebt zwei Tafeln
   seitlich (translateX(-50%)) und braucht dafuer JavaScript und einen
   Zustand. Der Bestand loest dasselbe mit <details>/<summary>: es klappt auf,
   ohne Skript, ist per Tastatur bedienbar und ueberlebt einen JS-Fehler. Das
   bleibt. Uebernommen wird die OPTIK der Zeilen, nicht der Mechanismus.

   FARBEN. Der Entwurf ist auf #16a34a und #0f1e33 gebaut; beides kommt im
   Haus nirgends vor. Benutzt werden --hfh-champagne-deep #37c84b,
   --hfh-accent #122B4C und --hfh-champagne-soft.
   ========================================================================== */

@media (max-width:767px){
  /* Nur die safe-area bleibt hier -- die Kopf-Ordnung selbst steht seit
     dem 31.08.2026 an der QUELLE (header3.css: Kopf 64px, Logo links 40px,
     X statisch 36px). Uebertoenen mit !important war der erste Wurf und
     fiel im eigenen Tor durch. */
  .hfh-mob{padding-top:env(safe-area-inset-top,0px)}


  /* --- Die Schublade selbst ---------------------------------------------- */
  /* VOLLE BREITE, 31.08.2026 ausdruecklich bestellt. Der Entwurf deckelt
     bei 430px; die Anweisung dazu lautet "der mega header soll full width
     werden" -- die Bestellung schlaegt den Entwurf. Der 430er-Deckel ist
     damit raus. */
  /* Ohne die 75vw-Regel (in header3.css am 31.08. entfernt) gibt es hier
     keinen !important-Gegner mehr; die Spezifitaet (0-1-2 gegen die
     0-1-0-Basisregel width:min(88vw,400px)) genuegt. */
  html body .hfh-mob{
    width:100vw;
    max-width:none;
    min-width:0;
    /* Der gruene Strich an der Oberkante ist raus (01.09.2026, Eigentuemer:
       "oben der Strich weg") -- die Kopfzeile traegt jetzt selbst die Marke. */
    box-shadow:0 0 80px rgba(11,29,53,.45);
  }

  /* --- Kopfzeile ---------------------------------------------------------- */
  /* Der Entwurf setzt ein kleines Zeichen und den Namen als Wortmarke, links
     ausgerichtet, und rechts das Schliessen -- statt eines 133px breiten
     Logos mittig. Das spart die Haelfte der Kopfhoehe fuer die Liste. */
  html body .hfh-mob .hfh-mob__head{
    /* 01.09.2026: DIESE Regel ist die wirksame Kopf-Quelle (laedt nach
       header3.css und gewinnt) -- die 77er-Aenderung in header3.css kam
       deshalb nie auf den Schirm ("X immer noch abgeschnitten"). Kein Logo
       mehr, das X sitzt rechts mit deutlich Luft nach oben. */
    justify-content:space-between;
    min-height:0;
    padding:26px 16px 12px;
    background:#fff;
    /* Der Trenner unter dem Kopfbereich sass im Entwurf am Suchfeld. Das
       Suchfeld ist auf Bestellung raus (siehe unten) -- die Linie wandert an
       den Kopf, sonst klebt die Liste ohne Zaesur am Logo. */
    border-bottom:1px solid #eef0f3;
  }
  html body .hfh-mob .hfh-mob__head-logo{display:none}
   /* Die Kopfzeile traegt den Sektionstitel auf Hoehe des X (01.09.2026):
      Mono-Feinformat wie die Eyebrows der Reihe, Gruentext #15803D (das
      Flaechengruen waere als Text auf Weiss zu schwach). */
   html body .hfh-mob .hfh-mob__head-title{
     font-family:ui-monospace,'IBM Plex Mono','SF Mono',Menlo,Consolas,monospace;
     font-size:11px;font-weight:600;letter-spacing:.2em;
     text-transform:uppercase;color:#15803D;
   }
  
  html body .hfh-mob .hfh-close-btn{
    position:static;
    width:36px;height:36px;
    flex:0 0 36px;
    border:1px solid #e6e9ee;
    border-radius:50%;
    background:#f6f7f9;
    color:#122B4C;
  }

  /* --- SUCHFELD: AUF BESTELLUNG ENTFERNT (31.08.2026) -------------------- */
  /* Der Entwurf zeigt ein Suchfeld; die Anweisung dazu lautet "ohne
     Suchleiste, die soll weg". Hier steht deshalb KEINE Regel mehr -- der
     Bestand versteckt das Feld ohnehin (header3.css:
     .hfh-mob__search{display:none!important}), und genau diese Regel laesst
     dieses Blatt jetzt wieder wirken, statt sie zu ueberbieten. Das Markup
     bleibt stehen: wer die Suche zurueckholt, loescht in header3.css eine
     Zeile, statt hier Markup nachzubauen.

     Die 16px-iOS-Regel auf dem Eingabefeld bleibt davon unberuehrt --
     relevant, falls die Suche eines Tages zurueckkommt. */

  /* "Shop by category" steht seit 01.09.2026 in der Kopfzeile; die
     Eyebrow-Regeln samt 22x2-Balken sind mit dem Markup gegangen. */

  html body .hfh-mob .hfh-mob__nav{padding:20px 20px 8px}

  /* --- Die Kategoriezeilen ------------------------------------------------ */
  /* Der Entwurf legt Farbfeld, Name mit Beizeile, Abzeichen und Pfeil in eine
     Zeile. Die Elemente sind im Markup GESCHWISTER -- Name und Beizeile
     stehen nicht in einem gemeinsamen Kasten. Mit Grid laesst sich das ohne
     Umbau des Markups setzen: zwei Zeilen, vier Spalten, das Farbfeld ueber
     beide Zeilen. Ein Umbau haette das Akkordeon und seine ARIA-Semantik
     angefasst; das ist es nicht wert. */
  html body .hfh-mob .hfh-mob2__summary,
  html body .hfh-mob .hfh-mob2__direct{
    display:grid;
    grid-template-columns:38px 1fr auto auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:12px;row-gap:1px;
    padding:13px 2px;
    border-bottom:1px solid #eef0f3;
    background:none;
  }
  html body .hfh-mob .hfh-mob2__summary-swatch{
    grid-column:1;grid-row:1 / span 2;
    width:38px;height:38px;
    background-color:#e9e4dc;
    background-size:cover;background-position:center;
    border:1px solid rgba(18,43,76,.08);
  }
  html body .hfh-mob .hfh-mob2__summary-swatch--bespoke{background-color:#4a2a18}
  html body .hfh-mob .hfh-mob2__summary-text{
    grid-column:2;grid-row:1;
    font-size:15px;font-weight:600;color:#122B4C;
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  html body .hfh-mob .hfh-mob2__summary-meta{
    grid-column:2;grid-row:2;
    justify-self:start;
    /* Nicht das #8a93a0 des Entwurfs: auf Weiss sind das rund 3,2:1 bei
       11,5px Fliesstext -- unter WCAG 1.4.3. #55606e liegt bei rund 5,9:1.
       Dieselbe Abwaegung wie im Trust-Streifen. */
    font-size:11.5px;font-weight:400;color:#55606e;
    /* Der Bestand machte hieraus eine gruene PILLE: Flaeche und
       border-radius:999px aus hf-global.css, ein 1px-Ring per box-shadow aus
       header3.css. Meine erste Neutralisierung nahm nur background, padding
       und border -- Form, Ring und die 24px-Hoehe ueberlebten, und genau die
       "Kreise" standen dann live. Die Quellen sind bereinigt (31.08.); hier
       steht die vollstaendige Ruhigstellung als Doppelsicherung, ohne
       !important. Der Entwurf kennt an dieser Stelle keine Pille, nur ein
       stilles Label. */
    background:none;padding:0;border:0;min-width:0;
    height:auto;border-radius:0;box-shadow:none;
  }
  /* Das NEUE-Abzeichen sitzt rechts, nicht unter dem Namen. */
  html body .hfh-mob .hfh-mob2__summary-meta--new{
    grid-column:3;grid-row:1 / span 2;
    justify-self:end;
    font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
    color:#15803D;background:rgba(121,183,129,.20);
    padding:3px 8px;
    height:auto;min-width:0;
    border-radius:0;box-shadow:none;   /* eckig wie im Entwurf, kein Erbe der Pille */
  }
  html body .hfh-mob .hfh-mob2__summary-icon{
    grid-column:4;grid-row:1 / span 2;
    justify-self:end;
    color:#b6bec9;
  }
  html body .hfh-mob .hfh-mob2__summary-icon svg{width:15px;height:15px}
  /* Der Pfeil dreht sich beim Aufklappen -- das ist der einzige Hinweis
     darauf, dass die Zeile ein Akkordeon ist und kein Link. */
  html body .hfh-mob .hfh-mob2__details[open] .hfh-mob2__summary-icon{
    transform:rotate(90deg);
  }
  html body .hfh-mob .hfh-mob2__summary-icon{transition:transform .25s ease}

  /* --- Das aufgeklappte Panel: die zweite Tafel des Entwurfs -------------- */
  /* Der Entwurf schiebt fuer die Unterkategorien eine zweite Tafel ein.
     Der Mechanismus bleibt hier das Akkordeon (begruendet im Kopf dieser
     Datei); uebernommen wird die ZEILENOPTIK der Tafel: gruener
     Browse-all-Balken, 42px-Bild, Name mit "N styles" darunter, Pfeil.
     Das Markup traegt all das bereits -- __all, __thumb, __sub-name,
     __sub-count, __sub-arrow. Hier steht nur die Optik. */
  html body .hfh-mob .hfh-mob2__panel{
    padding:2px 0 14px;
  }
  /* "Browse all X" -- im Entwurf ein gruener Balken mit Pfeil rechts.
     NICHT das #16a34a des Entwurfs: Weiss darauf sind rund 3,3:1, unter den
     4,5:1 aus WCAG 1.4.3. --hfh-success #15803D liegt bei rund 5,9:1 und ist
     dieselbe Flaeche wie der My-Account-Knopf weiter unten. */
  html body .hfh-mob .hfh-mob2__all{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:10px 0 6px;
    padding:13px 16px;
    background:#15803D;
    color:#fff;
    font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
    text-decoration:none;
    border:0;border-radius:0;
  }
  html body .hfh-mob .hfh-mob2__panel .hfh-mob2__items{
    list-style:none;margin:0;padding:0;
  }
  html body .hfh-mob .hfh-mob2__sub-row{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 2px;
    border-bottom:1px solid #eef0f3;
  }
  html body .hfh-mob .hfh-mob2__sublink{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
    min-width:0;
    color:#122B4C;
    text-decoration:none;
  }
  html body .hfh-mob .hfh-mob2__thumb{
    width:42px;height:42px;
    flex:0 0 42px;
    background:#e9e4dc;                 /* Grund, falls kein Bild haengt */
    border:1px solid rgba(18,43,76,.08);
    border-radius:0;
    overflow:hidden;
  }
  html body .hfh-mob .hfh-mob2__thumb img{
    width:100%;height:100%;
    object-fit:cover;display:block;
  }
  html body .hfh-mob .hfh-mob2__sub-copy{
    display:flex;flex-direction:column;gap:1px;
    min-width:0;
  }
  html body .hfh-mob .hfh-mob2__sub-name{
    font-size:14.5px;font-weight:600;color:#122B4C;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  html body .hfh-mob .hfh-mob2__sub-count{
    font-size:11.5px;font-weight:400;color:#55606e;
  }
  /* Der Pfeil ist Zierrat (aria-hidden), die Kontrastregel greift nicht --
     trotzdem dasselbe Gruen wie die tragenden Flaechen, keine dritte Sorte. */
  html body .hfh-mob .hfh-mob2__sub-arrow{
    color:#15803D;font-size:15px;flex:0 0 auto;
  }
  html body .hfh-mob .hfh-mob2__sub-toggle{
    flex:0 0 auto;
    width:34px;height:34px;
    display:flex;align-items:center;justify-content:center;
    background:#f6f7f9;border:1px solid #e6e9ee;border-radius:0;
    color:#122B4C;cursor:pointer;
  }
  html body .hfh-mob .hfh-mob2__sub-toggle svg{width:14px;height:14px}

  /* --- Fuss: Knoepfe, Telefon, Trust -------------------------------------- */
  html body .hfh-mob .hfh-mob__foot{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:12px 20px 0;
    border-top:0;
  }
  html body .hfh-mob .hfh-mob__foot-btn{
    justify-content:center;gap:8px;
    padding:13px 10px;
    border-radius:0;border:0;
    font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  }
  html body .hfh-mob .hfh-mob__foot-btn--pro{background:#122B4C;color:#fff}
  html body .hfh-mob .hfh-mob__foot-btn--account{background:#15803D;color:#fff}
  html body .hfh-mob .hfh-mob__foot-btn svg{width:15px;height:15px;stroke:currentColor;fill:none}

  html body .hfh-mob .hfh-mob__foot-tel{
    grid-column:1 / -1;
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:11px;
    border:1px solid #e6e9ee;
    font-size:12.5px;font-weight:600;color:#122B4C;
    text-decoration:none;
  }
  html body .hfh-mob .hfh-mob__foot-tel svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
  /* "· Mon-Fri": dieselbe Kontrastabwaegung wie bei den Beizeilen -- das
     #8a93a0 des Entwurfs liegt auf Weiss bei rund 3,2:1. Und die Angabe ist
     Inhalt, keine Zier: sie sagt, WANN die Nummer erreichbar ist. */
  html body .hfh-mob .hfh-mob__foot-tel-when{color:#55606e;font-weight:400}

  /* Der Entwurf setzt 11px und 14px Abstand -- bei seinen 430px passt das auf
     eine Zeile. Auf einem 375er Geraet sind es nach Abzug der Polster rund
     343px fuer drei Angaben und zwei Trenner; gemessen brach "UK-wide
     delivery" dort um. Schrift und Abstand sind deshalb eine Spur enger, und
     der Umbruch bleibt als Rueckfall erlaubt: auf einem noch schmaleren
     Geraet ist eine zweite Zeile besser als abgeschnittener Text. */
  html body .hfh-mob .hfh-mob__foot-trust{
    grid-column:1 / -1;
    display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:4px 8px;
    margin:12px -20px 0;
    padding:11px 12px calc(11px + env(safe-area-inset-bottom,0px));
    border-top:1px solid #eef0f3;
    background:#fafbfc;
  }
  html body .hfh-mob .hfh-mob__foot-trust-i{font-size:10.5px;color:#55606e;white-space:nowrap}
  html body .hfh-mob .hfh-mob__foot-star{color:#37c84b}
  html body .hfh-mob .hfh-mob__foot-trust-s{
    width:1px;height:12px;background:#e6e9ee;display:inline-block;
  }
}

@media (max-width:767px) and (prefers-reduced-motion:reduce){
  html body .hfh-mob .hfh-mob2__summary-icon{transition:none}
}