/* Affibox Pro v3 - Styles (width:90% default, images never cropped) */
.affibox { box-sizing: border-box; font-family: inherit; margin: 2rem 0; position: relative; width:100%; }
.affibox .affibox-inner { width:90%; max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; gap:1.25rem; justify-content:center; }

/* product card */
.affibox-item { background: #ffffff; border: 1px solid #e6e6e6; border-radius:10px; padding:1rem; box-shadow:0 2px 6px rgba(0,0,0,0.04); transition:all .25s ease; display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; }
.affibox-item:hover { transform: translateY(-4px); box-shadow:0 10px 20px rgba(0,0,0,0.06); }

/* image container - NO CROPPING: use contain; remove dashed border; background same as card so margins invisible */
.affibox-image { width:100%; max-width:380px; height:auto; background: #ffffff; border: none; border-radius:6px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:1rem; padding:0; }
.affibox-image img { display:block; max-width:100%; max-height:100%; height:auto; width:auto; object-fit:contain; }

/* orientation helpers set by JS */
.affibox-image.landscape { height:220px; }
.affibox-image.landscape img { width:100%; height:100%; object-fit:contain; }
.affibox-image.portrait { height:auto; }
.affibox-image.portrait img { width:100%; height:auto; object-fit:contain; }

/* content */
.affibox-content { width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; }
.affibox-title { font-weight:700; font-size:1.15rem; margin:0.25rem 0; line-height:1.2; }
.affibox-bullets { text-align:left; margin:0.5rem 0 0.8rem 1.25rem; color:#333; width:100%; max-width:800px; }
.affibox-price { font-weight:800; margin-top:0.6rem; margin-bottom:0.6rem; }
.affibox-button { display:inline-block; padding:0.6rem 1rem; border-radius:6px; text-decoration:none; font-weight:700; }

/* style variants */
.affibox.style1 .affibox-item { max-width:100%; }
.affibox.style2 .affibox-item { flex-direction:row; align-items:flex-start; text-align:left; width:100%; }
.affibox.style2 .affibox-image { margin-right:1rem; margin-bottom:0; width:40%; min-width:180px; max-width:420px; height:220px; }
.affibox.style2 .affibox-content { width:60%; padding-right:0.5rem; display:flex; flex-direction:column; align-items:flex-start; }

/* ensure buttons and content fill 90% in their container */
.affibox .affibox-content > * { width:90%; max-width:100%; box-sizing:border-box; }

/* responsive behavior */
@media (max-width: 900px) {
  .affibox .affibox-inner { width:95%; }
  .affibox.style2 .affibox-item { flex-direction:column; text-align:center; }
  .affibox.style2 .affibox-image { margin-right:0; margin-bottom:1rem; width:100%; max-width:380px; height:auto; }
  .affibox.style2 .affibox-content { width:100%; align-items:center; }
  .affibox .affibox-content > * { width:90%; }
}