/* =========================================================
   FurniLove – „Próbki tkanin" — scope .flp
   Tokeny jak na stronie „Nasze tkaniny" (.flt)
   ========================================================= */
.flp{
  --g:#a17c44; --g-d:#876230; --g-l:#c9a96a;
  --cream:#fbfaf3; --cream-2:#f4f0e6; --line:#ece7db;
  --ink:#1b1b1b; --soft:#4a4a4a; --muted:#6a6a6a;
  --r:18px; --shadow:0 1px 3px rgba(27,27,27,.05);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink); max-width:var(--wp--style--global--wide-size,1340px);
  margin:0 auto; padding:0 20px 120px; box-sizing:border-box;
}
.flp *,.flp *::before,.flp *::after{ box-sizing:border-box; }
.flp button{ font-family:inherit; }
.flp svg{ display:block; }
.flp [hidden]{ display:none !important; }
.flp .screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- HERO ---- */
.flp-hero{ text-align:center; padding:14px 0 30px; }
.flp-eyebrow{
  text-transform:uppercase; letter-spacing:.22em; font-size:.74rem; font-weight:600;
  color:var(--g); margin:0 0 10px;
}
.flp-title{
  font-family:"Playfair Display",Georgia,serif; font-weight:700; color:var(--ink);
  font-size:clamp(2rem,4.5vw,3.2rem); line-height:1.08; margin:0 0 14px; letter-spacing:-.01em;
}
.flp-lead{ max-width:720px; margin:0 auto; color:var(--muted); font-size:1.06rem; line-height:1.6; }
.flp-facts{
  list-style:none; margin:26px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
}
.flp-facts li{
  display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px;
  background:var(--cream); border:1px solid var(--line); border-radius:999px;
  font-size:.92rem; color:var(--soft);
}
.flp-facts b{ color:var(--ink); font-weight:700; }

/* ikona w kółku (spójna z „Nasze tkaniny") */
.flp-ic{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--line); color:var(--g);
}
.flp-ic svg{ width:17px; height:17px; }

/* ---- KROKI ---- */
.flp-steps{
  list-style:none; margin:0 0 34px; padding:18px 22px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r); counter-reset:none;
}
.flp-steps li{ display:flex; align-items:flex-start; gap:12px; font-size:.9rem; color:var(--muted); line-height:1.45; }
.flp-steps b{ display:block; color:var(--ink); font-size:.98rem; margin-bottom:2px; }
.flp-steps__n{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem;
}

/* ---- FILTRY ---- */
.flp-toolbar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px 24px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.flp-filters{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.flp-filter{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.flp-filter__label{
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); min-width:96px;
}
.flp-chip{
  display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--soft);
  font-size:.86rem; font-weight:600; cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.flp-chip:hover{ border-color:var(--g-l); color:var(--ink); }
.flp-chip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.flp-chip--icon{ padding-left:6px; }
.flp-chip__ic{ width:24px; height:24px; border-radius:50%; background:var(--cream); color:var(--g); display:inline-flex; align-items:center; justify-content:center; }
.flp-chip__ic svg{ width:15px; height:15px; }
.flp-chip[aria-pressed="true"] .flp-chip__ic{ background:rgba(255,255,255,.14); color:var(--g-l); }
.flp-results{ display:flex; align-items:center; gap:14px; font-size:.92rem; color:var(--muted); white-space:nowrap; }
.flp-results b{ color:var(--ink); }
.flp-clear{
  background:none; border:0; padding:0; color:var(--g-d); font-weight:600; font-size:.88rem;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

/* ---- KARTY ---- */
.flp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px; }
.flp-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease, border-color .25s;
}
.flp-card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(27,27,27,.09); border-color:#e2dac7; }
.flp-card__media{
  position:relative; display:block; width:100%; padding:0; border:0; background:var(--cream); cursor:pointer;
  aspect-ratio:4/3; overflow:hidden;
}
.flp-card__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.flp-card:hover .flp-card__media img{ transform:scale(1.04); }
.flp-card__colors,.flp-card__picked{
  position:absolute; left:12px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px; font-size:.78rem; font-weight:700;
}
.flp-card__colors{ bottom:12px; background:rgba(255,255,255,.94); color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.flp-card__colors svg{ width:15px; height:15px; color:var(--g); }
.flp-card__picked{ top:12px; background:var(--g); color:#fff; }
.flp-card__picked svg{ width:14px; height:14px; }
.flp-card__body{ flex:1 1 auto; display:flex; flex-direction:column; padding:18px 20px 20px; }
.flp-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.flp-card__name{ font-family:"Playfair Display",Georgia,serif; font-weight:700; font-size:1.5rem; line-height:1.1; margin:0; color:var(--ink); }
.flp-card__tag{ display:block; margin-top:4px; font-size:.8rem; color:var(--g); font-weight:600; }
.flp-card__price{
  flex:0 0 auto; text-align:right; font-weight:700; font-size:1.05rem; color:var(--ink); line-height:1.1;
  background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:7px 10px;
}
.flp-card__price small{ display:block; font-size:.68rem; font-weight:600; color:var(--muted); letter-spacing:.02em; margin-top:2px; }
.flp-card__icons{ list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.flp-card__icons .flp-ic{ width:30px; height:30px; cursor:help; }
.flp-card__feats{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:7px; }
.flp-card__feats li{ display:flex; align-items:flex-start; gap:8px; font-size:.88rem; line-height:1.4; color:var(--soft); }
.flp-card__feats svg{ flex:0 0 auto; width:16px; height:16px; margin-top:1px; color:var(--g); }
/* Kolory nad przyciskiem — przycisk na całą szerokość, więc nie ucina się przy węższych kartach (4 w rzędzie na desktopie). */
.flp-card__foot{ margin-top:auto; display:flex; flex-direction:column; align-items:stretch; gap:14px; }
.flp-card__foot .flp-btn{ width:100%; }
.flp-card__swatches{ align-self:flex-start; display:flex; align-items:center; padding:0; border:0; background:none; cursor:pointer; }
.flp-card__swatches span{
  width:28px; height:28px; border-radius:50%; background-size:cover; background-position:center;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--line); margin-left:-7px;
}
.flp-card__swatches span:first-child{ margin-left:0; }
.flp-card__swatches em{ font-style:normal; font-size:.78rem; font-weight:700; color:var(--muted); margin-left:6px; }

/* ---- PRZYCISKI ---- */
.flp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px;
  border-radius:999px; font-size:.92rem; font-weight:700; letter-spacing:.01em; text-decoration:none !important;
  cursor:pointer; border:1px solid transparent; transition:background .2s, color .2s, border-color .2s, transform .15s;
  white-space:nowrap;
}
.flp-btn:active{ transform:scale(.98); }
.flp-btn svg{ width:18px; height:18px; }
.flp-btn--outline{ background:#fff; color:var(--ink); border-color:var(--ink); }
.flp-btn--outline:hover{ background:var(--ink); color:#fff; }
.flp-btn--dark{ background:var(--ink); color:#fff !important; }
.flp-btn--dark:hover{ background:#000; }
.flp-btn--gold{ background:var(--g); color:#fff !important; }
.flp-btn--gold:hover{ background:var(--g-d); }

.flp-empty{ text-align:center; padding:40px 0; color:var(--muted); }

/* ---- DOBRZE WIEDZIEĆ ---- */
.flp-note{
  margin:44px 0 0; padding:24px 26px; background:var(--cream); border:1px solid var(--line); border-radius:var(--r);
}
.flp-note h2{ font-family:"Playfair Display",Georgia,serif; font-size:1.35rem; margin:0 0 14px; }
.flp-note ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px 26px; }
.flp-note li{ display:flex; gap:10px; font-size:.92rem; line-height:1.5; color:var(--soft); }
.flp-note li svg{ flex:0 0 auto; width:20px; height:20px; color:var(--g); margin-top:1px; }
.flp-note b{ color:var(--ink); }

/* ---- PASEK „W KOSZYKU" ---- */
.flp-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:9990; padding:0 16px 16px; pointer-events:none;
  animation:flp-up .35s ease;
}
.flp-bar__in{
  pointer-events:auto; max-width:760px; margin:0 auto; display:flex; align-items:center; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 8px 8px 12px;
  box-shadow:0 18px 40px rgba(27,27,27,.16);
}
.flp-bar__thumbs{ display:flex; }
.flp-bar__thumbs span{
  width:34px; height:34px; border-radius:50%; background-size:cover; background-position:center;
  border:2px solid #fff; box-shadow:0 0 0 1px var(--line); margin-left:-10px;
}
.flp-bar__thumbs span:first-child{ margin-left:0; }
.flp-bar__info{ flex:1 1 auto; display:flex; flex-direction:column; line-height:1.25; font-size:.9rem; color:var(--muted); min-width:0; }
.flp-bar__info b{ color:var(--ink); font-size:.95rem; }
@keyframes flp-up{ from{ transform:translateY(100%); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- OKNO WYBORU KOLORÓW ---- */
.flp-modal{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:24px; }
.flp-modal__overlay{ position:absolute; inset:0; background:rgba(20,18,14,.55); backdrop-filter:blur(2px); animation:flp-fade .2s ease; }
.flp-modal__card{
  position:relative; width:min(1120px,100%); max-height:calc(100vh - 48px); display:flex; flex-direction:column;
  background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.25); animation:flp-pop .25s ease;
}
.flp-modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 26px 16px; border-bottom:1px solid var(--line); }
.flp-modal__head .flp-eyebrow{ margin-bottom:6px; }
.flp-modal__head h3{ font-family:"Playfair Display",Georgia,serif; font-size:1.8rem; line-height:1.1; margin:0; }
.flp-modal__sub{ margin:6px 0 0; color:var(--muted); font-size:.9rem; }
.flp-modal__close{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff;
  font-size:1.6rem; line-height:1; color:var(--ink); cursor:pointer; transition:background .2s;
}
.flp-modal__close:hover{ background:var(--cream); }
.flp-modal__body{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:26px; padding:22px 26px; overflow:auto; min-height:0; }
.flp-modal__preview{ margin:0; position:sticky; top:0; align-self:start; }
.flp-modal__img{ aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--cream); border:1px solid var(--line); }
.flp-modal__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.flp-modal__preview figcaption{ display:flex; align-items:baseline; gap:10px; margin-top:12px; font-size:1rem; }
.flp-modal__preview figcaption b{ font-family:"Playfair Display",Georgia,serif; font-size:1.2rem; }
.flp-modal__preview figcaption span{ color:var(--muted); font-weight:600; }
.flp-modal__hint{ margin:10px 0 0; font-size:.85rem; color:var(--muted); line-height:1.5; }
.flp-modal__grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; align-content:start; }
.flp-sw{
  position:relative; display:flex; flex-direction:column; gap:6px; padding:0; border:0; background:none; cursor:pointer; text-align:center;
}
.flp-sw__img{
  position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--cream);
  box-shadow:0 0 0 1px var(--line); transition:box-shadow .2s, transform .2s;
}
.flp-sw__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.flp-sw:hover .flp-sw__img{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--g-l), 0 8px 18px rgba(27,27,27,.1); }
.flp-sw:focus-visible{ outline:none; }
.flp-sw:focus-visible .flp-sw__img{ box-shadow:0 0 0 3px var(--g-l); }
.flp-sw__code{ font-size:.8rem; font-weight:700; color:var(--soft); }
.flp-sw__check{
  position:absolute; top:7px; right:7px; width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,.92); border:1px solid var(--line); color:transparent;
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, border-color .2s;
}
.flp-sw__check svg{ width:15px; height:15px; }
.flp-sw[aria-pressed="true"] .flp-sw__img{ box-shadow:0 0 0 3px var(--g); }
.flp-sw[aria-pressed="true"] .flp-sw__check{ background:var(--g); border-color:var(--g); color:#fff; }
.flp-sw[aria-pressed="true"] .flp-sw__code{ color:var(--g-d); }
.flp-sw.is-busy .flp-sw__img::after{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,.45) linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  background-size:200% 100%; animation:flp-shimmer 1s linear infinite;
}
.flp-modal__foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 26px; border-top:1px solid var(--line); background:var(--cream);
}
.flp-modal__summary{ font-size:.92rem; color:var(--muted); }
.flp-modal__summary b{ color:var(--ink); }
.flp-modal__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.flp-toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:100000;
  background:var(--ink); color:#fff; padding:10px 18px; border-radius:999px; font-size:.88rem; font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

body.flp-lock{ overflow:hidden; }

@keyframes flp-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes flp-pop{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes flp-shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* ---- RESPONSYWNOŚĆ ---- */
@media (max-width:900px){
  .flp-steps{ grid-template-columns:1fr; gap:12px; }
  .flp-modal__body{ grid-template-columns:1fr; }
  .flp-modal__preview{ position:static; display:grid; grid-template-columns:120px 1fr; gap:4px 14px; align-items:center; }
  .flp-modal__img{ grid-row:span 2; aspect-ratio:1/1; border-radius:12px; }
  .flp-modal__preview figcaption{ margin:0; flex-direction:column; gap:2px; }
  .flp-modal__hint{ margin:0; font-size:.8rem; }
}
@media (max-width:640px){
  .flp{ padding:0 16px 120px; }
  .flp-filter__label{ min-width:0; width:100%; }
  .flp-filter{ flex-wrap:wrap; }
  .flp-toolbar{ align-items:flex-start; }
  .flp-grid{ grid-template-columns:1fr; }
  .flp-modal{ padding:0; align-items:flex-end; }
  .flp-modal__card{ max-height:92vh; border-radius:22px 22px 0 0; animation:flp-sheet .3s ease; }
  .flp-modal__head{ padding:18px 18px 12px; }
  .flp-modal__head h3{ font-size:1.5rem; }
  .flp-modal__body{ padding:16px 18px; gap:16px; }
  .flp-modal__grid{ grid-template-columns:repeat(3,1fr); gap:10px; }
  .flp-modal__foot{ padding:12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .flp-modal__summary{ width:100%; }
  .flp-modal__actions{ width:100%; }
  .flp-modal__actions .flp-btn{ flex:1 1 0; padding:0 12px; }
  .flp-bar{ padding:0 10px 10px; }
  .flp-bar__in{ border-radius:18px; gap:10px; }
  .flp-bar__thumbs span:nth-child(n+4){ display:none; }
  .flp-bar .flp-btn{ padding:0 14px; }
  .flp-bar .flp-btn svg{ display:none; }
}
@keyframes flp-sheet{ from{ transform:translateY(40px); opacity:.6; } to{ transform:none; opacity:1; } }
@media (prefers-reduced-motion:reduce){
  .flp *, .flp *::before, .flp *::after{ animation:none !important; transition:none !important; }
}