/* ============================================================================
   HOMES & FLOORS — SAMPLE-SHOP
   Entwurf "Samples Shop Section.dc.html", aus der Quelle gelesen.
   2026-08-31, v1.11.73
   ----------------------------------------------------------------------------
   Masse und Anordnung kommen aus dem Entwurf; die FARBEN aus dem Haus, mit
   denselben Begruendungen wie bei Tab-Leiste und Trust-Streifen:

       #0d1b2e  ->  #0a1f3a   --hf-surface-navy (Abzeichen, aktive Chips)
       #3ec24d  ->  #37c84b   --hfh-champagne-deep (Flaechen mit navy Schrift,
                              Kontrast rund 7:1)
       #0f6b43  ->  #15803D   --hfh-success (gruene SCHRIFT auf Weiss — die
                              Entwurfsfarbe laege dort bei rund 4,3:1)
       #8b96a3  ->  #66707d   Beizeilen ("per sample"): 3,4:1 -> 5,4:1
       #eef1f4  ->  #eaf0f7   --hfh-warm als Seitengrund

   Mono-Akzente wie im Entwurf (IBM Plex Mono mit ui-monospace davor — die
   Familie, die das Haus als --smp4-mono ohnehin fuehrt).

   DIE KASSENLEISTE UND DIE TAB-LEISTE teilen sich mobil die Unterkante.
   Unter 768px sitzt die Kassenleiste OBERHALB der schwebenden Tab-Leiste
   (.hfbn, ~92px inkl. Abstand), auf dem Desktop buendig unten. Ohne diesen
   Versatz laegen zwei Leisten uebereinander und die Tab-Leiste verdeckte
   den Kassen-Knopf — der eine Knopf, den diese Seite verkaufen soll.
   ========================================================================== */

.hfx-smpshop{
  --smpshop-navy:#0a1f3a;
  --smpshop-green:#37c84b;
  --smpshop-green-press:#2fae3f;
  --smpshop-ink:#101b2d;
  --smpshop-body:#3d4753;
  --smpshop-mut:#66707d;
  --smpshop-line:#d8dee5;
  --smpshop-line-soft:#e6eaef;
  --smpshop-gtext:#15803D;
  --smpshop-mono:ui-monospace,'IBM Plex Mono',Menlo,monospace;
  background:#eaf0f7;
  padding:clamp(28px,5vw,56px) 16px 110px;
  color:var(--smpshop-ink);
  font-family:'Poppins',system-ui,sans-serif;
}
.hfx-smpshop__wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:18px}

/* --- Kopf ------------------------------------------------------------- */
.hfx-smpshop__head{display:flex;flex-direction:column;gap:8px}
.hfx-smpshop__eyebrow{
  display:flex;align-items:center;gap:12px;
  font-family:var(--smpshop-mono);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--smpshop-gtext);
}
.hfx-smpshop__eyebrow span{width:24px;height:2px;background:var(--smpshop-gtext)}
.hfx-smpshop__title{margin:0;font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:-.015em;color:var(--smpshop-ink)}
.hfx-smpshop__facts{margin:0;font-family:var(--smpshop-mono);font-size:11px;letter-spacing:.08em;color:var(--smpshop-mut)}

/* --- Haftende Filterleiste --------------------------------------------- */
.hfx-smpshop__filter{
  background:#fff;border:1px solid var(--smpshop-line);
  box-shadow:0 12px 32px -20px rgba(16,27,45,.25);
  /* Nicht mehr haftend (31.08.2026, Eigentuemer-Auftrag: "der Filter soll
     nicht mit runtergehen" -- Desktop wie mobil). Der z-index bleibt fuer
     das aufgeklappte Panel ueber den Karten. */
  position:relative;z-index:40;
}
.hfx-smpshop__ftoggle{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;background:none;border:0;cursor:pointer;
  padding:16px;min-height:52px;font-family:inherit;
}
.hfx-smpshop__ftl{display:flex;align-items:center;gap:12px;color:var(--smpshop-gtext)}
.hfx-smpshop__ftl b{font-size:13.5px;font-weight:700;letter-spacing:.02em;color:var(--smpshop-ink)}
.hfx-smpshop__fchip{
  background:var(--smpshop-navy);color:var(--smpshop-green);
  font-family:var(--smpshop-mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;
}
.hfx-smpshop__ftr{display:flex;align-items:center;gap:12px}
.hfx-smpshop__fcount{font-size:12px;color:var(--smpshop-mut)}
.hfx-smpshop__fcount strong{color:var(--smpshop-ink);font-weight:600}
.hfx-smpshop__chev{
  display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;color:var(--smpshop-gtext);font-size:14px;
  transition:transform .2s;
}
.hfx-smpshop__ftoggle.is-open .hfx-smpshop__chev{transform:rotate(180deg)}
.hfx-smpshop__fpanel{border-top:1px solid var(--smpshop-line-soft);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.hfx-smpshop__chips{display:flex;flex-wrap:wrap;gap:8px}
.hfx-smpshop__chip{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  border:0;cursor:pointer;padding:13px 18px;min-height:44px;
  font-family:inherit;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;
  background:#eaf0f7;color:var(--smpshop-body);
  transition:background .15s,color .15s;
}
.hfx-smpshop__chip span{font-family:var(--smpshop-mono);font-size:10.5px;font-weight:500;color:var(--smpshop-gtext)}
.hfx-smpshop__chip:hover{background:var(--smpshop-green);color:var(--smpshop-navy)}
.hfx-smpshop__chip:hover span{color:var(--smpshop-navy)}
.hfx-smpshop__chip.is-active{background:var(--smpshop-navy);color:var(--smpshop-green)}
.hfx-smpshop__chip.is-active span{color:#8fd4ae}
.hfx-smpshop__clear{
  align-self:flex-start;background:none;border:0;cursor:pointer;padding:0 0 2px;
  font-family:var(--smpshop-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--smpshop-gtext);
  border-bottom:1px solid var(--smpshop-gtext);
}

/* --- Karten ------------------------------------------------------------ */
.hfx-smpshop__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:12px}
.hfx-smpshop__card{background:#fff;border:1px solid var(--smpshop-line);display:flex;flex-direction:column;transition:box-shadow .2s}
.hfx-smpshop__card:hover{box-shadow:0 16px 40px -20px rgba(16,27,45,.35)}
.hfx-smpshop__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#eef1f4}
.hfx-smpshop__media img{width:100%;height:100%;object-fit:cover;display:block}
.hfx-smpshop__media img[data-fit="contain"]{object-fit:contain}
.hfx-smpshop__badge{
  position:absolute;left:12px;top:12px;pointer-events:none;
  background:var(--smpshop-navy);color:#fff;
  font-family:var(--smpshop-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 9px;
}
.hfx-smpshop__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.hfx-smpshop__name{font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--smpshop-ink);text-decoration:none}
.hfx-smpshop__name small{display:block;font-size:11px;font-weight:400;color:var(--smpshop-mut);margin-top:2px}
.hfx-smpshop__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  margin-top:auto;border-top:1px solid #eef1f4;padding-top:10px;
}
.hfx-smpshop__price{display:flex;align-items:baseline;gap:6px}
.hfx-smpshop__price b{font-size:16px;font-weight:700}
.hfx-smpshop__price span{font-size:11.5px;color:var(--smpshop-mut)}
.hfx-smpshop__cut{font-family:var(--smpshop-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--smpshop-gtext)}

/* Die drei Knopfzustaende des Entwurfs. */
.hfx-smpshop__order{
  display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;padding:13px 12px;width:100%;min-height:44px;
  font-family:inherit;font-size:11.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--smpshop-green);color:var(--smpshop-navy);
  transition:background .15s,color .15s;
}
.hfx-smpshop__order:hover{background:var(--smpshop-green-press)}
.hfx-smpshop__order.is-in{background:var(--smpshop-navy);color:var(--smpshop-green)}
.hfx-smpshop__order.is-in:hover{background:#132c4d}
.hfx-smpshop__order.is-full{background:var(--smpshop-line-soft);color:var(--smpshop-mut);cursor:default}
.hfx-smpshop__order.is-busy{opacity:.55;pointer-events:none}
.hfx-smpshop__empty{grid-column:1/-1;font-size:14px;color:var(--smpshop-mut)}

/* --- Bestaetigungsblatt ------------------------------------------------- */
/* GUARD zuerst: display:flex am Wrapper schlaegt das UA-[hidden]
   {display:none} -- Autoren-Origin vor UA-Origin, Spezifitaet zaehlt dann
   nicht. Im Harness gemessen (31.08.2026): hidden-Attribut gesetzt,
   computed display trotzdem "flex". Ohne diese Regel laege das Blatt samt
   Scrim DAUERHAFT ueber der Seite. Gilt fuer beide hidden-gesteuerten
   Ueberlagerungen. */
.hfx-smpshop__sheetwrap[hidden]{display:none}
.hfx-smpshop__sheetwrap{position:fixed;inset:0;z-index:10600;display:flex;align-items:flex-end;justify-content:center}
.hfx-smpshop__scrim{
  position:absolute;inset:0;background:rgba(10,31,58,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:hfxScrimIn .28s ease-out;
}
.hfx-smpshop__sheet{
  /* Farblich kraeftiger (01.09.2026, Eigentuemer): satte Gruenkante oben. */
  border-top:4px solid var(--smpshop-green);
  position:relative;background:#fff;width:100%;max-width:520px;
  padding:14px 22px calc(26px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:18px;
  border-radius:20px 20px 0 0;
  box-shadow:0 -6px 24px rgba(10,31,58,.12),0 -28px 70px -18px rgba(10,31,58,.45);
  animation:hfxSheetUp .42s cubic-bezier(.22,1,.36,1);
}
@keyframes hfxSheetUp{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
@keyframes hfxScrimIn{from{opacity:0}to{opacity:1}}
.hfx-smpshop__grab{align-self:center;width:44px;height:5px;border-radius:3px;background:#dde3e9;margin-bottom:2px}
.hfx-smpshop__sheettop{display:flex;align-items:center;gap:16px}
/* Vorschaubild der bestellten Karte; ohne Bild bleibt der Haken allein
   (gruene Kachel). Mit Bild wandert der Haken als Abzeichen in die Ecke. */
.hfx-smpshop__thumb{
  position:relative;width:64px;height:64px;flex:0 0 64px;border-radius:14px;
  background:rgba(21,128,61,.09);display:flex;align-items:center;justify-content:center;
}
.hfx-smpshop__thumb img{display:none}
.hfx-smpshop__thumb.has-img{background:var(--smpshop-line-soft)}
.hfx-smpshop__thumb.has-img img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(10,31,58,.08);
}
.hfx-smpshop__tick{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--smpshop-gtext);color:#fff;
  box-shadow:0 3px 10px rgba(10,31,58,.28);
}
.hfx-smpshop__thumb.has-img .hfx-smpshop__tick{
  position:absolute;right:-7px;bottom:-7px;width:26px;height:26px;border:2px solid #fff;
}
.hfx-smpshop__tick svg{display:block}
/* Grundzustand sichtbar (Offset 0); nur waehrend is-anim wird der Haken
   gezeichnet. So bleibt er auch sichtbar, wenn die Animation nie laeuft. */
.hfx-smpshop__tick svg polyline{stroke-dasharray:24;stroke-dashoffset:0}
.hfx-smpshop__tick.is-anim{animation:hfxTickPop .34s .08s cubic-bezier(.34,1.56,.64,1) backwards}
.hfx-smpshop__tick.is-anim svg polyline{stroke-dashoffset:24;animation:hfxTickDraw .4s .22s cubic-bezier(.22,1,.36,1) forwards}
@keyframes hfxTickPop{from{transform:scale(.3)}to{transform:scale(1)}}
@keyframes hfxTickDraw{to{stroke-dashoffset:0}}
.hfx-smpshop__sheethead{min-width:0}
.hfx-smpshop__sheethead b{
  display:block;font-family:var(--smpshop-mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--smpshop-gtext);
}
.hfx-smpshop__sheethead span{
  display:block;font-size:18px;font-weight:800;letter-spacing:-.01em;
  color:var(--smpshop-navy);line-height:1.3;margin-top:3px;
}
.hfx-smpshop__meter{
  display:flex;flex-direction:column;gap:7px;
  /* gruen getoent statt neutralgrau -- das Blatt darf Farbe zeigen */
  background:rgba(55,200,75,.10);border:1px solid rgba(21,128,61,.30);
  border-radius:14px;padding:14px 16px;
}
.hfx-smpshop__meterrow{display:flex;justify-content:space-between;align-items:baseline}
.hfx-smpshop__meterrow span{
  font-family:var(--smpshop-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--smpshop-gtext);
}
.hfx-smpshop__meterrow b{font-size:15px;font-weight:800;color:var(--smpshop-navy);font-variant-numeric:tabular-nums}
.hfx-smpshop__track{height:8px;border-radius:4px;background:#e3e8ed;overflow:hidden;box-shadow:inset 0 1px 2px rgba(10,31,58,.08)}
.hfx-smpshop__fill{height:100%;width:0;border-radius:4px;background:var(--smpshop-green);transition:width .5s cubic-bezier(.22,1,.36,1)}
.hfx-smpshop__tip{font-size:12.5px;color:var(--smpshop-mut);line-height:1.5}
.hfx-smpshop__more{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--smpshop-green);color:var(--smpshop-navy);
  border:0;border-radius:14px;cursor:pointer;width:100%;min-height:54px;
  font-family:inherit;font-size:13px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:16px 20px;
  box-shadow:0 10px 24px -12px rgba(21,128,61,.55);
  transition:transform .15s,box-shadow .15s,background .15s;
}
.hfx-smpshop__more:hover{background:var(--smpshop-green-press);transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(21,128,61,.6)}
.hfx-smpshop__more:active{transform:translateY(0);box-shadow:0 6px 16px -10px rgba(21,128,61,.5)}
.hfx-smpshop__done{
  align-self:center;font-family:var(--smpshop-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--smpshop-mut);
  border-bottom:1px solid #cfd6de;padding:2px 2px 3px;text-decoration:none;
}
.hfx-smpshop__done:hover{color:var(--smpshop-gtext);border-color:var(--smpshop-gtext)}
@media (min-width:768px){
  .hfx-smpshop__sheet{max-width:480px;margin:0 auto 30px;border-radius:20px}
}

/* Kassenleiste entfernt (01.09.2026, Eigentuemer): der Zaehler lebt nur
   noch im Bestaetigungsblatt, die Tab-Leiste laeuft wieder normal. */

@media (prefers-reduced-motion:reduce){
  .hfx-smpshop__chev,.hfx-smpshop__fill,.hfx-smpshop__chip,.hfx-smpshop__order,.hfx-smpshop__card,.hfx-smpshop__more{transition:none}
  .hfx-smpshop__sheet,.hfx-smpshop__scrim,.hfx-smpshop__tick.is-anim{animation:none}
  /* Ohne Zeichen-Animation muss der Haken sofort voll sichtbar sein */
  .hfx-smpshop__tick.is-anim svg polyline{stroke-dashoffset:0;animation:none}
}