.fpcc-wrapper {
  --fpcc-gap: 18px;
  display: flex;
  align-items: stretch;
  gap: 22px;
  width: 100%;
}

.fpcc-banner-end .fpcc-banner { order: 2; }
.fpcc-banner-end .fpcc-carousel { order: 1; }

.fpcc-banner {
  position: relative;
  flex: 0 0 280px;
  min-width: 0;
  min-height: 390px;
  overflow: hidden;
  border-radius: 16px;
  background-color: #374151;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}

.fpcc-banner::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .35);
  content: "";
}

.fpcc-banner-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: inherit;
  padding: 28px;
  color: #fff;
}

.fpcc-banner-title { margin: 0 0 10px; color: inherit; font-size: 28px; line-height: 1.35; }
.fpcc-banner-text, .fpcc-banner-text p { margin: 0 0 18px; color: inherit; }
.fpcc-banner-button {
  align-self: flex-start;
  padding: 10px 18px;
  border-radius: 9px;
  background: #fff;
  color: #111827;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}
.fpcc-banner-button:hover { color: inherit; opacity: .92; transform: translateY(-2px); }

.fpcc-carousel { position: relative; flex: 1 1 0; min-width: 0; padding-bottom: 30px; }
.fpcc-viewport { width: 100%; overflow: hidden; touch-action: pan-y; }
.fpcc-track {
  display: flex;
  gap: var(--fpcc-gap);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.fpcc-track.is-dragging { transition: none; }
.fpcc-slide { flex: 0 0 calc((100% - ((var(--fpcc-slides) - 1) * var(--fpcc-gap))) / var(--fpcc-slides)); min-width: 0; }
.fpcc-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 22px rgba(17, 24, 39, .06);
}
.fpcc-product-image { position: relative; display: block; overflow: hidden; background: #f8fafc; }
.fpcc-product-image img { display: block; width: 100%; height: 220px; margin: 0; object-fit: cover; transition: transform .35s ease; }
.fpcc-product-card:hover .fpcc-product-image img { transform: scale(1.035); }
.fpcc-sale-badge { position: absolute; top: 12px; right: 12px; padding: 5px 9px; border-radius: 20px; background: #dc2626; color: #fff; font-size: 12px; font-weight: 700; }
[dir="rtl"] .fpcc-sale-badge { right: auto; left: 12px; }
.fpcc-product-content { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.fpcc-product-title { display: -webkit-box; min-height: 2.8em; margin: 0 0 10px; overflow: hidden; color: #111827; font-size: 15px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fpcc-product-title a { color: inherit; text-decoration: none; }
.fpcc-rating { min-height: 18px; margin-bottom: 7px; }
.fpcc-rating .star-rating { float: none; margin: 0; font-size: 13px; }
.fpcc-product-price { margin: auto 0 13px; color: #0f766e; font-size: 15px; font-weight: 800; }
.fpcc-product-price del { margin-inline-end: 5px; opacity: .55; font-weight: 400; }
.fpcc-product-card .button { display: block; width: 100%; margin: 0; padding: 11px 12px; border: 0; border-radius: 8px; background: #111827; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; }
.fpcc-product-card .added_to_cart { display: block; margin-top: 7px; font-size: 12px; text-align: center; }

.fpcc-arrow {
  position: absolute;
  top: 45%;
  z-index: 3;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.1);
  color: #111827;
  cursor: pointer;
  place-items: center;
  transform: translateY(-50%);
}
.fpcc-prev { left: 8px; }
.fpcc-next { right: 8px; }
[dir="rtl"] .fpcc-prev { right: 8px; left: auto; }
[dir="rtl"] .fpcc-next { right: auto; left: 8px; }
.fpcc-arrow:disabled { cursor: default; opacity: .32; }
.fpcc-arrow:focus-visible, .fpcc-dot:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.fpcc-dots { position: absolute; right: 0; bottom: 4px; left: 0; display: flex; justify-content: center; gap: 7px; }
.fpcc-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #cbd5e1; cursor: pointer; transition: width .2s ease, background .2s ease; }
.fpcc-dot.is-active { width: 22px; background: #111827; }
.fpcc-empty { padding: 20px; border: 1px dashed #cbd5e1; border-radius: 10px; text-align: center; }

@media (max-width: 1024px) {
  .fpcc-wrapper { gap: 16px; }
  .fpcc-banner { flex-basis: 230px; }
}

@media (max-width: 767px) {
  .fpcc-mobile-banner-side { flex-direction: row; align-items: stretch; gap: 10px; }
  .fpcc-mobile-banner-side .fpcc-banner {
    width: clamp(125px, 38vw, 170px) !important;
    max-width: 170px;
    min-width: clamp(125px, 38vw, 170px);
    min-height: 330px;
    flex: 0 0 clamp(125px, 38vw, 170px) !important;
  }
  .fpcc-mobile-banner-side .fpcc-carousel { flex: 1 1 auto; width: calc(100% - clamp(125px, 38vw, 170px) - 10px); }
  .fpcc-mobile-banner-side .fpcc-banner-content { padding: 15px; }
  .fpcc-mobile-banner-side .fpcc-banner-title { font-size: 18px; }
  .fpcc-mobile-banner-side .fpcc-banner-text { display: none; }
  .fpcc-mobile-banner-side .fpcc-banner-button { padding: 8px 10px; font-size: 12px; }

  .fpcc-mobile-banner-stacked { flex-direction: column; }
  .fpcc-mobile-banner-stacked .fpcc-banner,
  .fpcc-mobile-banner-stacked.fpcc-banner-end .fpcc-banner { order: 1; width: 100%; min-height: 240px; flex-basis: auto; }
  .fpcc-mobile-banner-stacked .fpcc-carousel,
  .fpcc-mobile-banner-stacked.fpcc-banner-end .fpcc-carousel { order: 2; width: 100%; }
  .fpcc-arrow { width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .fpcc-track, .fpcc-product-image img, .fpcc-banner-button { transition: none; }
}