/* === Crumbly SAFE – minimalny layout dla /sklep === */
:root{
  --cream:#FFF9F1; --ink:#2b1e16; --ink-2:#6a5a4f;
  --gold:#c28e2f; --gold-2:#b68227; --card:#f6efe4;
  --ring: rgba(194,142,47,.35);
}

/* HERO */
/* === HERO: poziomy banner nad produktami === */
.cf-arch-hero{
  background: var(--cream);
}
.cf-arch-hero--banner{
  padding: clamp(32px,5vw,72px) 20px clamp(20px,3.2vw,32px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cf-arch-hero--banner .cf-arch-hero__inner{
  max-width: min(1120px, 94vw);
  margin: 0 auto;
  text-align: center; /* jeśli wolisz lewą, zmień na left */
}
.cf-arch-hero--banner .cf-arch-kicker{
  display:inline-block;
  margin-bottom: .5rem;
}
.cf-arch-hero--banner .cf-arch-title{
  margin: 0 0 .6rem;
}
.cf-arch-hero--banner .cf-arch-lead{
  margin: 0 auto;
  max-width: 70ch;
}

/* odetnij kolumnowe „dziedziczenie” i zapewnij odstęp przed pierwszą sekcją */
.cf-arch-hero--banner + .cf-arch-section-head{
  margin-top: clamp(12px, 2vw, 24px);
}

/* bezpieczeństwo: nigdy nie pozwalaj, by hero był traktowany jak element siatki */
.cf-arch-hero--banner,
.cf-arch-hero--banner *{
  float: none;
  clear: none;
}

.cf-arch-hero--image{
  position: relative;
  min-height: clamp(320px, 44vw, 560px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--cream);
}

/* TŁO – robustny fallback */
.cf-arch-hero--image::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: 50% 45%;
  background-repeat: no-repeat;
  transform: scale(1.02);
  filter: contrast(1.02) saturate(1.02);
}

/* Overlay – dajmy trochę słabszy, by zobaczyć obraz */
.cf-arch-hero__overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(to top,
     rgba(255,249,241,0.82) 0%,
     rgba(255,249,241,0.55) 40%,
     rgba(255,249,241,0.08) 100%);
}

.cf-arch-hero__inner{ position:relative; z-index:2; width:min(1100px,92vw); padding:clamp(32px,4vw,56px) 20px; text-align:center; }


/* NAGŁÓWEK SEKCJI */
.cf-arch-section-head{ background:var(--cream); padding:8px 20px; }
.cf-arch-section-head .wrap{ max-width:min(1120px,94vw); margin:0 auto; }
.cf-sec-title{ font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(22px,3.6vw,34px); margin:6px 0 10px; color:var(--ink); }

/* GRID – tylko nasz (brak floatów, brak columns-*) */
.cf-arch-grid{ background:var(--cream); padding:6px 20px 24px; }
.cf-arch-grid__inner{ max-width:min(1120px,94vw); margin:0 auto; }
.cf-arch-grid__inner > ul.products{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px,2.2vw,28px);
  list-style:none; margin:0; padding:0;
}
@media (max-width:1024px){ .cf-arch-grid__inner > ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){ .cf-arch-grid__inner > ul.products{ grid-template-columns:1fr; } }

.cf-arch-grid__inner > ul.products > li.product{ margin:0; }

/* Karty */
.cf-card{
  background:#fff; border-radius:20px; overflow:clip;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  transition:transform .18s, box-shadow .18s;
}
.cf-card:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.09); }
.cf-story__media{ aspect-ratio:4/3; background:var(--card); }
.cf-story__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cf-story__body{ padding:16px 16px 18px; }
.cf-card__kicker{ display:inline-block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-2); margin-bottom:.25rem; }
.cf-card__title{ font-family:"Playfair Display",serif; font-size:clamp(18px,2.4vw,24px); margin:0 0 .4rem; }
.cf-card__desc{ color:var(--ink-2); font-size:.98rem; line-height:1.5; }
.cf-btn{ display:inline-block; margin-top:.6rem; padding:10px 16px; border:1.6px solid var(--gold); border-radius:999px; text-decoration:none; color:var(--ink); font-weight:600; }
.cf-btn:hover{ background:var(--gold); color:#fff; border-color:var(--gold); }

/* MINI-HERO */
.cf-mini-hero{ background:var(--cream); padding:clamp(22px,4.2vw,48px) 20px; margin:8px 0 18px; }
.cf-mini-hero__inner{ max-width:min(1120px,94vw); margin:0 auto; text-align:center; }
.cf-mini-hero__title{ font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(20px,3.2vw,30px); margin:.2rem 0 .4rem; color:var(--ink); }
.cf-mini-hero__lead{ color:var(--ink-2); max-width:70ch; margin:0 auto .6rem; }
.cf-btn--gold{ border-color:var(--gold); }

/* Twardy reset typografii wewnątrz produktów (żeby nie łamało liter pionowo) */
.cf-arch-grid *{ writing-mode:horizontal-tb; white-space:normal; word-break:normal; }



@media (min-width:1025px){
  body.woocommerce-shop #content.site-content{
    display: block !important;
    flex-direction: initial !important;
    flex-wrap: initial !important;
    align-items: initial !important;
  }
  body.woocommerce-shop #content.site-content > .cf-arch-hero,
  body.woocommerce-shop #content.site-content > .cf-arch-section-head,
  body.woocommerce-shop #content.site-content > .cf-arch-grid,
  body.woocommerce-shop #content.site-content > .cf-mini-hero{
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    align-self: stretch !important;
    order: initial !important;
  }

  /* Poziomy banner-hero */
  .cf-arch-hero.cf-arch-hero--banner{
    display:block !important;
    padding: clamp(32px,5vw,72px) 20px clamp(20px,3.2vw,32px) !important;
    background: var(--cream);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .cf-arch-hero--banner .cf-arch-hero__inner{
    max-width: min(1120px,94vw);
    margin: 0 auto;
    text-align: left; /* jeśli chcesz center — zmień na center */
  }
}








:root{
  --cream:#FFF9F1; --ink:#2b1e16; --ink-2:#6a5a4f;
  --gold:#c28e2f; --gold-2:#d4af37; --gold-1:#a8741a; --gold-3:#f2d98d; /* złota paleta */
  --card:#ffffff; --tile:#FFF9F1; --ring: rgba(212,175,55,.35);
}

/* ---------- HERO (poziomy banner nad produktami) ---------- */
.cf-arch-hero{ background: var(--cream); }
.cf-arch-hero--banner{
  padding: clamp(32px,5vw,72px) 20px clamp(20px,3.2vw,32px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cf-arch-hero__inner{ max-width:min(1120px,94vw); margin:0 auto; text-align:left; }
.cf-arch-kicker{
  display:inline-block; font-size:.85rem; letter-spacing:.12em; text-transform:uppercase;
  color: color-mix(in oklab, var(--gold) 82%, #6a5a4f); margin-bottom:.5rem;
}
.cf-arch-title{
  font-family:"Playfair Display",serif; font-weight:700;
  font-size: clamp(28px,5vw,48px); line-height:1.12; color:var(--ink); margin:0 0 .6rem;
}
.cf-arch-lead{ color:var(--ink-2); max-width:70ch; }

/* ---------- NAGŁÓWEK SEKCJI ---------- */
.cf-arch-section-head{ background: var(--cream); padding: 8px 20px; scroll-margin-top: 96px; }
.cf-arch-section-head .wrap{ max-width:min(1120px,94vw); margin:0 auto; }
.cf-sec-title{
  font-family:"Playfair Display",serif; font-weight:700;
  font-size: clamp(22px,3.6vw,34px); margin: 6px 0 12px; color: var(--ink);
}

/* ---------- GRID ---------- */
.cf-arch-grid{ background: var(--tile); padding: 6px 20px 28px; }
.cf-arch-grid__inner{ max-width:min(1120px,94vw); margin:0 auto; }
.cf-arch-grid__inner > ul.products{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  list-style:none; margin:0; padding:0;
}
@media (max-width:1024px){ .cf-arch-grid__inner > ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px){  .cf-arch-grid__inner > ul.products{ grid-template-columns:1fr; } }

/* ---------- KARTA PRODUKTU: PREMIUM ---------- */
.cf-arch-grid ul.products>li.product{
  position:relative;
  background: var(--card);
  border-radius: 28px;
  box-shadow: 0 10px 36px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  overflow: clip;
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform, box-shadow;
}
.cf-arch-grid ul.products>li.product:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0,0,0,.12), 0 3px 10px rgba(0,0,0,.06);
  filter: saturate(1.02);
}

/* Media + delikatny połysk */
.cf-arch-grid ul.products>li.product a.woocommerce-LoopProduct-link{ position:relative; display:block; color:inherit; text-decoration:none; }
.cf-arch-grid ul.products>li.product a.woocommerce-LoopProduct-link img{
  width:100%; height:auto; display:block;
  aspect-ratio: 4/3; object-fit: cover; background:#f3eee6;
  transform: translateZ(0); transition: transform .35s ease;
}
.cf-arch-grid ul.products>li.product:hover a.woocommerce-LoopProduct-link img{ transform: scale(1.035); }
.cf-arch-grid ul.products>li.product a.woocommerce-LoopProduct-link::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 60% at 10% 0%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%),
              linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,0));
  pointer-events:none; mix-blend-mode: screen;
}

/* Tytuł + cena */
.cf-arch-grid ul.products>li.product .woocommerce-loop-product__title{
  font-family:"Playfair Display",serif; font-weight:700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height:1.2; margin: 14px 18px 6px; color: var(--ink);
}
.cf-arch-grid ul.products>li.product .price{
  display:block; margin:0 18px 12px; color: var(--ink); font-size:16px;
}
.cf-arch-grid ul.products>li.product .price del{ opacity:.55; margin-right:8px; }
.cf-arch-grid ul.products>li.product .price ins{ text-decoration:none; font-weight:700; }

/* BUTTON: złota obwódka → złote wypełnienie + sheen */
.cf-arch-grid ul.products>li.product a.button{
  position:relative; align-self:flex-start; margin: 10px 18px 18px;
  padding: 11px 22px; border-radius: 999px; border:2px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(180deg,var(--gold-3),var(--gold-2)) border-box;
  color: var(--ink); font-weight:800; letter-spacing:.01em; text-transform:none; text-decoration:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 18px rgba(168,116,26,.15);
  transition: background-color .25s, color .25s, box-shadow .25s, transform .06s, filter .25s;
  overflow:hidden; will-change: transform, box-shadow, filter;
}
.cf-arch-grid ul.products>li.product a.button::after{
  content:""; position:absolute; inset:-20% -40% auto auto; width:60%; height:220%;
  transform: rotate(18deg) translateX(-120%);
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen; pointer-events:none; transition: transform .8s ease;
}
.cf-arch-grid ul.products>li.product a.button:hover{
  background: linear-gradient(180deg,var(--gold-3),var(--gold-2)) padding-box,
              linear-gradient(180deg,var(--gold-2),var(--gold-1)) border-box;
  color:#2b1e16; filter:saturate(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 10px 26px rgba(168,116,26,.30), 0 0 0 3px rgba(212,175,55,.22);
}
.cf-arch-grid ul.products>li.product a.button:hover::after{ transform: rotate(18deg) translateX(40%); }
.cf-arch-grid ul.products>li.product a.button:focus-visible{
  outline:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 4px rgba(242,217,141,.45), 0 10px 26px rgba(168,116,26,.28);
}
.cf-arch-grid ul.products>li.product a.button:active{ transform: translateY(1px); }
.cf-arch-grid ul.products>li.product a.button.disabled,
.cf-arch-grid ul.products>li.product a.button[disabled]{ opacity:.6; cursor:not-allowed; filter: grayscale(.1); }

/* SALE – „wax seal” */
.cf-arch-grid ul.products>li.product .onsale{
  position:absolute; z-index:4; top:14px; left:14px;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:12px; color:#fff;
  background: conic-gradient(from 210deg at 50% 50%, var(--gold-3), var(--gold-2), var(--gold-1), var(--gold-2), var(--gold-3));
  box-shadow: inset 0 -2px 6px rgba(0,0,0,.22), inset 0 2px 6px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.18);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* ---------- KAFEL STORYTELLING ---------- */
.cf-arch-grid ul.products>li.product.cf-story.cf-card{
  border-radius:28px; box-shadow:0 10px 36px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  display:flex; flex-direction:column; background:#fff;
}
.cf-story__media{ aspect-ratio:4/3; background:#f3eee6; }
.cf-story__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cf-story__body{ padding: 16px 18px 18px; }
.cf-card__kicker{ display:inline-block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--gold-1); margin-bottom:.25rem; }
.cf-card__title{ font-family:"Playfair Display",serif; font-size: clamp(18px, 2.2vw, 22px); margin:0 0 .4rem; color:var(--ink); }
.cf-card__desc{ color: var(--ink-2); line-height:1.55; }
.cf-btn{ display:inline-block; margin-top:.6rem; padding:10px 16px; border:1.6px solid var(--gold); border-radius:999px; text-decoration:none; color:var(--ink); font-weight:600; }
.cf-btn--gold{ border-color: var(--gold); }

/* ---------- MINI-HERO (full width między sekcjami) ---------- */
.cf-mini-hero{ background: var(--cream); padding: clamp(22px,4.2vw,48px) 20px; margin: 8px 0 18px; }
.cf-mini-hero__inner{ max-width:min(1120px,94vw); margin:0 auto; text-align:center; }
.cf-mini-hero__title{
  font-family:"Playfair Display",serif; font-weight:700;
  font-size: clamp(20px,3.2vw,30px); margin:.2rem 0 .4rem; color:var(--ink);
}
.cf-mini-hero__lead{ color:var(--ink-2); max-width:70ch; margin:0 auto .6rem; }

/* ---------- Porządki typografii ---------- */
.cf-arch-grid ul.products>li.product *{ writing-mode:horizontal-tb; white-space:normal; word-break:normal; }
.cf-arch-grid ul.products>li.product a{ text-decoration:none; }
.cf-arch-grid ul.products>li.product .star-rating{ display:none; } /* włączymy kiedy będziemy stylować oceny */

/* ---------- DESKTOP FIX: motywowy flex → block na /sklep ---------- */
@media (min-width:1025px){
  body.woocommerce-shop #content.site-content{
    display:block !important; flex-direction:initial !important; flex-wrap:initial !important; align-items:initial !important;
  }
  body.woocommerce-shop #content.site-content > .cf-arch-hero,
  body.woocommerce-shop #content.site-content > .cf-arch-section-head,
  body.woocommerce-shop #content.site-content > .cf-arch-grid,
  body.woocommerce-shop #content.site-content > .cf-mini-hero{
    width:100% !important; max-width:none !important; flex:0 0 100% !important; align-self:stretch !important; order:initial !important;
  }
}