.sffr-product-carousel {
  padding: 0;
}

.sffr-product-carousel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.sffr-product-carousel__title {
  margin: 0;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #2A170D;
}

.sffr-carousel-nav {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.sffr-carousel-btn {
  appearance: none;
  border: none;
  width: 2.875rem;
  aspect-ratio: 0.8660254;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #FDB742;
  color: #6E4900;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sffr-carousel-btn:hover,
.sffr-carousel-btn:focus-visible {
  background: #FFCB6B;
}

.sffr-carousel-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* Pages + flick: the viewport clips, the track is moved with transform (see JS) */
.sffr-product-carousel__viewport {
  overflow: hidden;
  touch-action: pan-y;
  cursor: grab;
  padding-bottom: 4px;
}

.sffr-product-carousel__viewport.is-drag {
  cursor: grabbing;
}

.sffr-product-carousel__viewport:focus-visible {
  outline: 2px solid #815600;
  outline-offset: 2px;
  border-radius: 4px;
}

.sffr-product-carousel__track {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.sffr-product-carousel__track.no-anim {
  transition: none;
}

.sffr-product-carousel__track img {
  -webkit-user-drag: none;
}

.sffr-product-carousel__pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.sffr-product-carousel__pager[hidden] {
  display: none;
}

.sffr-pager__count {
  /* visually hidden, still announced to screen readers when the page changes */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sffr-product-carousel__pager .sffr-dots {
  grid-column: 2;
}

.sffr-product-carousel__pager .sffr-carousel-nav {
  grid-column: 3;
}

.sffr-product-carousel__pager .sffr-carousel-nav {
  justify-self: end;
}

.sffr-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.sffr-dots button {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 0.875rem;
  aspect-ratio: 0.8660254;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #DAC1BA;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.sffr-dots button.on {
  background: #FDB742;
  transform: scale(1.3);
}

.sffr-dots button:hover,
.sffr-dots button:focus-visible {
  background: #FDB742;
}

.sffr-carousel-btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

.sffr-product-card {
  flex: 0 0 auto;
  width: 15.5rem;
  display: flex;
  flex-direction: column;
}

.sffr-product-card__media {
  display: block;
}

.sffr-product-card__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 15px;
  background: #F9EFD7;
  display: block;
}

.sffr-product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 1.25rem;
}

.sffr-product-card__buy {
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sffr-qty {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  height: 2.75rem;
  padding: 0 5px;
  background: #F9EFD7;
  border-radius: 50px;
}

.sffr-qty__btn {
  appearance: none;
  border: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 50%;
  color: #2A170D;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.sffr-qty__value {
  width: 1.75rem;
  min-width: 0;
  text-align: center;
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #2A170D;
}

.sffr-qty__value::-webkit-outer-spin-button,
.sffr-qty__value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* WooCommerce's own add-to-cart button/link, restyled to match the card.
   No fixed height / nowrap: if a future longer label doesn't fit, it wraps
   onto a second line instead of overflowing past the pill (see the Miody
   carousel bug this replaced — "Dodaj do koszyka" overflowed a fixed-height
   nowrap pill that was too narrow next to the qty stepper). */
.sffr-product-card__buy .add_to_cart_button,
.sffr-product-card__buy a.button,
.sffr-product-card__buy .button {
  flex: 1 1 auto;
  min-width: 6rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: #FDB742;
  color: #6E4900;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Icon stack: four SVGs layered in one slot. The resting (inactive) pose is
   "floated up + faded"; the active icon plays sffr-ico-in (rises from below),
   so whichever icon leaves drifts up while the next one enters from beneath. */
.sffr-ico {
  position: relative;
  display: block;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.sffr-ico__i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateY(-70%) scale(0.6);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.3s ease;
  pointer-events: none;
}

.sffr-ico__i--loading path {
  transform-box: view-box;
  transform-origin: 12px 12px;
  animation: sffr-spin 0.7s linear infinite;
}

.sffr-product-card__buy .add_to_cart_button:not(.sffr-is-loading):not(.sffr-is-success):not(.sffr-is-error) .sffr-ico__i--cart,
.sffr-product-card__buy .add_to_cart_button.sffr-is-loading .sffr-ico__i--loading,
.sffr-product-card__buy .add_to_cart_button.sffr-is-success .sffr-ico__i--success,
.sffr-product-card__buy .add_to_cart_button.sffr-is-error .sffr-ico__i--error {
  opacity: 1;
  transform: none;
}

/* Entrance animation only after the first interaction (no pop on page load) */
.sffr-product-card__buy .add_to_cart_button.sffr-touched:not(.sffr-is-loading):not(.sffr-is-success):not(.sffr-is-error) .sffr-ico__i--cart,
.sffr-product-card__buy .add_to_cart_button.sffr-touched.sffr-is-loading .sffr-ico__i--loading,
.sffr-product-card__buy .add_to_cart_button.sffr-touched.sffr-is-success .sffr-ico__i--success,
.sffr-product-card__buy .add_to_cart_button.sffr-touched.sffr-is-error .sffr-ico__i--error {
  animation: sffr-ico-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes sffr-ico-in {
  from { opacity: 0; transform: translateY(70%) scale(0.6); }
  to   { opacity: 1; transform: none; }
}

@keyframes sffr-spin {
  to { transform: rotate(360deg); }
}

.sffr-product-card__buy .add_to_cart_button {
  transition: background-color 0.4s ease, color 0.4s ease;
}

.sffr-product-card__buy .add_to_cart_button.sffr-is-error {
  background: #F2B8B0;
  color: #7A1F12;
}

.sffr-product-card__buy .add_to_cart_button.sffr-is-success {
  background: #FDB742;
}

/* WooCommerce's own loading/added ::after icons would double up with ours */
.sffr-product-card__buy .add_to_cart_button::after {
  content: none !important;
  display: none !important;
}

.sffr-product-card__buy .add_to_cart_button:hover,
.sffr-product-card__buy .add_to_cart_button:focus-visible {
  background: #FFCB6B;
  color: #6E4900;
}

.sffr-product-card__buy .added_to_cart {
  display: none;
}

.sffr-product-card__name {
  margin: 0 0 0.375rem;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.sffr-product-card__name a {
  color: #2A170D;
  text-decoration: none;
  transition: color 0.2s ease;
}

.sffr-product-card__name a:hover,
.sffr-product-card__name a:focus-visible {
  color: #815600;
}

.sffr-product-card__weight {
  align-self: flex-start;
  margin: 0 0 0.75rem;
  padding: 0.1875rem 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #54433D;
  border: 1px solid #DAC1BA;
  border-radius: 0.125rem;
}

.sffr-product-card__price {
  margin: auto 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  color: #815600;
}

.sffr-product-card__price ins {
  text-decoration: none;
}

.sffr-product-card__price del {
  opacity: 0.6;
  font-size: 0.85em;
  margin-right: 0.375rem;
}

/* Beat theme/WooCommerce input + button resets (higher specificity) */
.sffr-product-card .sffr-qty input.sffr-qty__value {
  width: 1.75rem;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.sffr-product-card .sffr-qty button.sffr-qty__btn {
  padding: 0;
  border: 0;
  background: #FFFFFF;
  color: #2A170D;
}

.sffr-product-card .sffr-product-card__buy {
  flex-wrap: nowrap;
  min-width: 0;
}

.sffr-product-card .sffr-product-card__buy a.add_to_cart_button {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.5rem 0.625rem;
  white-space: nowrap;
}

/* ---- Invitation card: same footprint as a product, leads to the category ---- */
.sffr-product-card--invite .sffr-invite {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.sffr-invite__pic {
  aspect-ratio: 1;
  border-radius: 15px;
  background: #FDB742;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.sffr-invite__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sffr-invite__pic svg {
  width: 78%;
  height: auto;
}

.sffr-h-a { fill: #FFFFFF; }
.sffr-h-b { fill: #FFF8EA; }
.sffr-h-c { fill: #DAC1BA; opacity: 0.7; }
.sffr-h-arrow { stroke: #815600; }

.sffr-invite__cta {
  margin-bottom: 1.25rem;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2px solid #FDB742;
  border-radius: 50px;
  background: #FDB742;
  color: #6E4900;
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sffr-invite__cta svg {
  width: 0.65rem;
  height: 0.65rem;
}

.sffr-invite:hover .sffr-invite__cta,
.sffr-invite:focus-visible .sffr-invite__cta {
  background: #FFCB6B;
  border-color: #FFCB6B;
}

.sffr-invite:focus-visible {
  outline: 2px solid #815600;
  outline-offset: 4px;
  border-radius: 15px;
}

/* ---- Product card flags (sale / out of stock) ---- */
.sffr-product-card__media {
  position: relative;
}

.sffr-product-card__flag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.25rem 0.625rem;
  border-radius: 50px;
  background: #FDB742;
  color: #6E4900;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sffr-product-card__flag--out {
  background: #2A170D;
  color: #FFEDE6;
}

/* ---- Card inside WooCommerce's own loops (shop, categories, related) ---- */
body ul.products[class*="columns-"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 2.5rem 1.25rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}

body ul.products[class*="columns-"]::before,
body ul.products[class*="columns-"]::after {
  display: none;
  content: none;
}

body.woocommerce ul.products[class*="columns-"] li.product.sffr-product-card--loop,
body.woocommerce-page ul.products[class*="columns-"] li.product.sffr-product-card--loop,
body ul.products[class*="columns-"] li.product.sffr-product-card--loop {
  float: none;
  clear: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex: none;
}

/* Not purchasable here (out of stock etc.): a quiet link to the product page */
.sffr-product-card__buy a.button:not(.add_to_cart_button) {
  background: transparent;
  border: 2px solid #DAC1BA;
  color: #54433D;
}

.sffr-product-card__buy a.button:not(.add_to_cart_button):hover,
.sffr-product-card__buy a.button:not(.add_to_cart_button):focus-visible {
  border-color: #FDB742;
  background: #FFF8EA;
  color: #2A170D;
}

/* WooCommerce's layout CSS adds margin-bottom: 1em to loop images: not in our card */
body.woocommerce ul.products li.product.sffr-product-card--loop a.sffr-product-card__media img,
body.woocommerce-page ul.products li.product.sffr-product-card--loop a.sffr-product-card__media img {
  margin: 0;
  width: 100%;
  height: auto;
  box-shadow: none;
}

/* ==========================================================================
   Hardening for WooCommerce pages.
   woocommerce.css only applies under a `.woocommerce` ancestor (body class on
   shop / category / product pages, absent on the homepage) and its selectors
   out-rank the card's own. Without this the category page differed from the
   homepage: the button fell back to inline-block (icon above the text, pushed
   down by margin-top: 1em), hovered purple, faded to 25% while loading and
   re-showed the "view cart" link.
   ========================================================================== */
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 50px;
  background: #FDB742;
  color: #6E4900;
  font: 600 0.75rem/1.2 'Inter', sans-serif;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  opacity: 1;
}

.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button.loading,
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button.added {
  opacity: 1;
  padding: 0.5rem 0.625rem;
}

.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button:hover,
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button:focus-visible {
  background: #FFCB6B;
  color: #6E4900;
}

/* Plain link to the product (out of stock, variable): quiet outline instead of the filled pill */
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button:not(.add_to_cart_button) {
  background: transparent;
  border: 2px solid #DAC1BA;
  color: #54433D;
}

.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button:not(.add_to_cart_button):hover,
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button:not(.add_to_cart_button):focus-visible {
  border-color: #FDB742;
  background: #FFF8EA;
  color: #2A170D;
}

/* Button states must stay above the hardened base and hover rules */
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button.sffr-is-error,
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button.sffr-is-error:hover {
  background: #F2B8B0;
  color: #7A1F12;
}

.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button.sffr-is-success,
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.button.sffr-is-success:hover {
  background: #FDB742;
  color: #6E4900;
}

.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__buy a.added_to_cart {
  display: none;
}

/* Price: WooCommerce greys/greens `.price` descendants; keep the card's own colour */
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__price,
.woocommerce ul.products li.product.sffr-product-card--loop .sffr-product-card__price .amount {
  color: #815600;
  font-size: 1.125rem;
  font-weight: 600;
}

.sffr-product-card__props {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-self: flex-start;
  margin: 0 0 0.75rem;
}

.sffr-product-card__props .sffr-product-card__weight {
  margin: 0;
}