/* ============================================================================
   HOMES & FLOORS — SAMPLES OPTIK  (Design "Samples.dc.html")
   ----------------------------------------------------------------------------
   ONE stylesheet for /samples/. Scoped under .hfx exactly like
   hf-checkout-optik.css, so it cannot leak into the rest of the site and does
   not need a single !important to win.

   Why a new namespace instead of restyling .hf-sgrid / .hfv2-pcard / .hf-fbar:
   those class names carry stale copies inside hf-global.css. Restyling them
   means fighting the cascade on every rule. The old markup is gone from
   samples.php, so the old rules simply never match.

   Token source: claude.ai/design "Hochwertiger Cart und Checkout" →
   Samples.dc.html. Same palette as the cart/checkout optic — one design.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
.hfx-smp{
  --hfx-bg:#f5f8f6;
  --hfx-card:#ffffff;
  --hfx-line:#e8ebe8;

  --hfx-ink:#16305c;           /* navy — headings/values */
  --hfx-body:#6b7883;
  --hfx-sub:#3d5468;
  --hfx-faint:#9aa5b0;

  --hfx-green:#3aaa4c;         /* primary CTA            */
  --hfx-green-ink:#2e7d3f;     /* green text / eyebrow   */
  --hfx-green-soft:#eaf5ec;
  --hfx-chip:#f2f5f2;

  --hfx-gold-bg:#faf5e8;
  --hfx-gold-ink:#a8863d;
  --hfx-gold-line:#e8dcbc;

  --hfx-r-card:12px;
  --hfx-r-tile:10px;
  --hfx-r-btn:4px;

  max-width:1360px;
  margin:0 auto;
  padding:30px 28px 64px;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--hfx-ink);
  box-sizing:border-box;
}
.hfx-smp *,
.hfx-smp *::before,
.hfx-smp *::after{box-sizing:border-box}

/* ------------------------------------------------------------------ head -- */
.hfx-smp__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
.hfx-smp__title{font-size:28px;font-weight:700;color:var(--hfx-ink);margin:0;line-height:1.2}
.hfx-smp__sub{font-size:14px;color:var(--hfx-body);margin:4px 0 0}
.hfx-smp__basket{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--hfx-green-soft);border-radius:999px;
  padding:10px 18px;font-size:13px;color:var(--hfx-ink);
}
.hfx-smp__basket b{font-weight:700;color:var(--hfx-green-ink)}

/* ------------------------------------------------------------- box panel -- */
.hfx-smp__boxes{
  margin-top:26px;background:var(--hfx-card);
  border:1px solid var(--hfx-line);border-radius:var(--hfx-r-card);
  padding:26px 26px 28px;
}
.hfx-smp__boxhead{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.hfx-smp__boxtitle{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hfx-smp__badge{
  background:var(--hfx-gold-bg);color:var(--hfx-gold-ink);
  border:1px solid var(--hfx-gold-line);
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.hfx-smp__boxh2{font-size:19px;font-weight:700;color:var(--hfx-ink);margin:0}
.hfx-smp__boxnote{font-size:13px;color:var(--hfx-body)}

.hfx-smp__boxgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:18px;margin-top:20px;
}

.hfx-smp__box{
  border:1px solid var(--hfx-line);border-radius:var(--hfx-r-tile);
  overflow:hidden;display:flex;flex-direction:column;background:var(--hfx-card);
}
.hfx-smp__boxm{height:150px;background:var(--hfx-chip);overflow:hidden}
.hfx-smp__boxm img{width:100%;height:100%;object-fit:cover;display:block}
.hfx-smp__boxb{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.hfx-smp__boxn{font-size:15.5px;font-weight:700;color:var(--hfx-ink);line-height:1.3}
.hfx-smp__boxd{font-size:12.5px;color:var(--hfx-body);margin-top:2px;line-height:1.45}
/* Die Inhaltsliste der Boxen ist am 2026-08-03 entfallen — erst als Pillen,
   dann als getoenter Block, am Ende ganz. Bei fuenf Karten nebeneinander war
   sie der hoechste Block und trug den Kauf nicht: der Kunde entscheidet nach
   Stimmung ("Light & Natural"), nicht nach Produktnamen. Der Inhalt liegt jetzt
   als _hf_sample_box_contents am Box-Produkt und erscheint im
   Admin-Bestelldetail, wo ihn die Kommissionierung tatsaechlich braucht.
   .hfx-smp__chips / .hfx-smp__chip sind daher bewusst nicht mehr definiert. */
.hfx-smp__boxfoot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.hfx-smp__boxp{font-size:19px;font-weight:700;color:var(--hfx-ink)}
.hfx-smp__boxwas{font-size:13px;color:var(--hfx-faint);text-decoration:line-through}

/* ---------------------------------------------------------------- button -- */
.hfx-smp__add{
  margin-left:auto;border:none;font:inherit;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:11px 18px;border-radius:var(--hfx-r-btn);cursor:pointer;
  background:var(--hfx-green);color:#ffffff;
  transition:background .15s ease,filter .15s ease;
}
.hfx-smp__add:hover{filter:brightness(.96)}
.hfx-smp__add.is-added{background:var(--hfx-ink)}
.hfx-smp__add[disabled]{cursor:default;filter:none;opacity:.55}
.hfx-smp__add.is-busy{cursor:progress;opacity:.7}

/* ----------------------------------------------------------------- shell -- */
.hfx-smp__main{
  display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:24px;align-items:start;margin-top:26px;
}
.hfx-smp__filter{
  position:sticky;top:20px;background:var(--hfx-card);
  border:1px solid var(--hfx-line);border-radius:var(--hfx-r-card);padding:18px;
}
.hfx-smp__filterh{font-size:13.5px;font-weight:700;color:var(--hfx-ink);padding:0 10px 10px}
.hfx-smp__filterlist{display:flex;flex-direction:column;gap:3px}
.hfx-smp__f{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:none;font:inherit;font-size:13.5px;font-weight:600;text-align:left;
  padding:10px 12px;border-radius:6px;cursor:pointer;
  background:transparent;color:var(--hfx-ink);
  transition:background .15s ease,filter .15s ease;
}
.hfx-smp__f:hover{filter:brightness(.97);background:var(--hfx-chip)}
.hfx-smp__f.is-active{background:var(--hfx-ink);color:#ffffff}
.hfx-smp__f.is-active:hover{background:var(--hfx-ink)}
.hfx-smp__fc{font-size:12px;font-weight:500;opacity:.65}

.hfx-smp__count{font-size:13.5px;color:var(--hfx-body);margin-bottom:14px}
.hfx-smp__count strong{color:var(--hfx-ink)}

.hfx-smp__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;
}
.hfx-smp__card{
  background:var(--hfx-card);border:1px solid var(--hfx-line);
  border-radius:var(--hfx-r-tile);overflow:hidden;display:flex;flex-direction:column;
}
.hfx-smp__cardm{aspect-ratio:4/3;background:var(--hfx-chip);overflow:hidden}
.hfx-smp__cardm img{width:100%;height:100%;object-fit:cover;display:block}
.hfx-smp__cardm img[data-fit="contain"]{object-fit:contain}
.hfx-smp__cardb{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.hfx-smp__meta{
  font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hfx-green-ink);
}
.hfx-smp__name{font-size:14px;font-weight:600;line-height:1.4;color:var(--hfx-ink);text-wrap:pretty}
.hfx-smp__name a{color:inherit;text-decoration:none}
.hfx-smp__name a:hover{text-decoration:underline}
.hfx-smp__price{font-size:16px;font-weight:700;color:var(--hfx-ink);margin-top:2px}
.hfx-smp__price span{font-size:11.5px;font-weight:400;color:var(--hfx-faint)}

.hfx-smp__order{
  margin-top:auto;width:100%;border-width:1.5px;border-style:solid;
  border-color:var(--hfx-ink);font:inherit;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:12px 10px;border-radius:var(--hfx-r-btn);cursor:pointer;
  background:var(--hfx-card);color:var(--hfx-ink);
  transition:background .15s ease,filter .15s ease;
}
.hfx-smp__order:hover{filter:brightness(.96)}
.hfx-smp__order.is-added{
  border-color:transparent;background:var(--hfx-green-soft);color:var(--hfx-green-ink);
}
.hfx-smp__order.is-maxed{
  border-color:transparent;background:var(--hfx-chip);color:#9aa5a0;cursor:default;
}
.hfx-smp__order.is-busy{cursor:progress;opacity:.7}

.hfx-smp__empty{
  grid-column:1/-1;padding:40px 20px;text-align:center;
  font-size:14px;color:var(--hfx-body);
  background:var(--hfx-card);border:1px solid var(--hfx-line);border-radius:var(--hfx-r-tile);
}

/* ---------------------------------------------------------------- status -- */
.hfx-smp__status{
  margin-top:14px;padding:12px 16px;border-radius:var(--hfx-r-tile);
  background:var(--hfx-green-soft);border:1px solid var(--hfx-line);
  font-size:13px;font-weight:600;color:var(--hfx-ink);
}
.hfx-smp__status.is-error{background:#fdecea;border-color:#f5c6c3;color:#b03a34}
.hfx-smp__status[hidden]{display:none}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:1000px){
  .hfx-smp__main{grid-template-columns:1fr}
  .hfx-smp__filter{position:static}
  .hfx-smp__filterlist{flex-direction:row;flex-wrap:wrap}
  .hfx-smp__f{flex:0 0 auto}
}
@media (max-width:700px){
  .hfx-smp{padding:22px 16px 48px}
  .hfx-smp__title{font-size:23px}
  .hfx-smp__boxes{padding:20px 16px 22px}
  .hfx-smp__boxgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
  .hfx-smp__grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .hfx-smp__boxfoot{gap:8px}
  .hfx-smp__add{margin-left:0;width:100%}
}

/* Reduced motion: the transitions here are decorative only. */
@media (prefers-reduced-motion:reduce){
  .hfx-smp__add,.hfx-smp__order,.hfx-smp__f{transition:none}
}


/* ---- sample boxes: coming soon (2026-08-03) --------------------------------
   The section keeps its layout and reads as a preview, not as an offer: no
   price, no strikethrough, no Add button — those are removed in the markup,
   not merely hidden, so nothing about a live offer is left in the page. */
.hfx-smp__boxes.is-soon { opacity: .92; }
.hfx-smp__boxes.is-soon .hfx-smp__badge { background: #eef2f6; color: #5b6b7d; }
.hfx-smp__boxes.is-soon .hfx-smp__boxm { filter: saturate(.85); }
.hfx-smp__soon {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #eef2f6;
	color: #5b6b7d;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.hfx-smp__soon::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #94a3b3;
}