/* ----------------------------------------------------
   PLUGIN: Pokloni & Popusti — Carousel & Offer Styling
   File: assets/css/pnp-carousel.css
   (2025-06-12) : tighten layout, left-align items
------------------------------------------------------- */

/* ========== PNP OFFER BLOCK ========== */
.pnp-offer-block{
  width:100%;                 /* use the full width of the summary column */
  max-width:100%;             /* never overflow */
  border:1px solid #ddd;
  padding:16px 14px;
  margin:24px 0 0;
  background:#fafafa;
  border-radius:4px;
  box-sizing:border-box;
}

/* Offer text */
.pnp-offer-block p{
  font-size:14px;
  color:#333;
  margin:0 0 12px;
  text-align:left;            /* left, not centre */
}

/* PLUS label */
.pnp-plus-label{
  font-size:14px;
  font-weight:600;
  margin:14px 0 8px;
  text-align:left;
}

/* divider */
.pnp-hr{
  border:0;
  border-top:1px solid #e1e1e1;
  margin:14px 0;
}

/* ========== “FULFILLED” HEADING + BUTTON ========== */
.pnp-fulfilled-heading{
  text-align:left;
  font-size:15px;
  font-weight:600;
  color:#007cba;
  margin:0 0 8px;
}
.pnp-finish-button{
  display:inline-block;
  background:#007cba;
  color:#fff;
  padding:8px 16px;
  border-radius:3px;
  font-size:14px;
  text-decoration:none;
  transition:background .2s;
}
.pnp-finish-button:hover{background:#005a8c}

/* ========== CAROUSEL ========== */
.pnp-carousel{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  gap:12px;
  padding:4px 0;
  margin:0;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;      /* smooth snap */
  justify-content:flex-start;        /* ← left! */
}
.pnp-carousel-item{
  flex:0 0 180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#fff;
  padding:8px;
  border:1px solid #e1e1e1;
  border-radius:4px;
  transition:box-shadow .2s;
  scroll-snap-align:start;
}
.pnp-carousel-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.08)}

.pnp-carousel-image{
  width:100%;height:140px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;margin-bottom:8px;
}
.pnp-carousel-image img{max-width:100%;max-height:100%;object-fit:contain}

.pnp-carousel-title{
  font-size:14px;line-height:1.3;margin-bottom:4px;
  text-align:center;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden;
}
.pnp-carousel-price{font-size:13px;color:#444;margin-bottom:8px}

.pnp-add-to-cart{
  font-size:13px;padding:6px 10px;width:100%;text-align:center;
  background:#007cba;color:#fff;border:0;border-radius:3px;cursor:pointer;
  transition:background .2s;
}
.pnp-add-to-cart:hover{background:#005a8c}

/* mobile tweaks */
@media(max-width:600px){
  .pnp-carousel-item{flex:0 0 140px}
  .pnp-carousel-image{height:120px}
}
@media(max-width:400px){
  .pnp-carousel-item{flex:0 0 120px}
  .pnp-carousel-image{height:100px}
}

/* 1) Make the offer block itself left-aligned */
.pnp-single-offer,
.pnp-multi-offer {
  text-align: left;
}

/* 2) Left-align the “🎁 …” paragraph */
.pnp-single-offer > p,
.pnp-multi-offer > p {
  margin-bottom: 0.5em;
  text-align: left;
}

/* 3) Single-offer: center the image + title under it */
.pnp-single-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* optional: limit how big the image can get */
  max-width: 140px;
  margin: 0;        /* remove any default margins */
}
.pnp-single-item a img {
  width: 100%;      /* fills the flex container’s max-width */
  height: auto;
}
.pnp-single-item a span {
  display: block;
  margin-top: 0.4em;
  text-align: center;
  font-weight: 500;
}

/* 4) Multi-offer: make a flex-row of small, centered thumbnails */
.pnp-multi-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;       /* space between items */
}
.pnp-multi-item {
  flex: 0 0 auto;
  width: 100px;     /* or whatever thumbnail container size you like */
  text-align: center;
}
.pnp-multi-item img {
  max-width: 100%;
  height: auto;
}
.pnp-multi-title {
  margin-top: 0.3em;
  font-size: 0.9em;
}