/* Amazon Showcase frontend styles */
:root{--as-bg:#fff;--as-fg:#111;--as-muted:#666;--as-border:#ddd;--as-primary:#ff9900;--as-prime:#00a8e1;--as-btn-green:#82b440}
@media (prefers-color-scheme: dark){:root{--as-bg:#0b0b0b;--as-fg:#e6e6e6;--as-muted:#a3a3a3;--as-border:#262626}}

/* Force styles inside widgets to override theme defaults */
.widget .as-card {
  text-align: center !important;
}
.widget .as-title {
  color: #111 !important;
  text-align: center !important;
}
.widget .as-price {
  color: #111 !important;
  text-align: center !important;
}
.widget .as-card .as-btn,
.widget .as-card a.as-btn {
  color: #fff !important;
  background: #82b440 !important; /* Default green, will be overridden by inline style */
}

/* Card layout - Vertical by default (like grid items) */
.as-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  border:1px solid var(--as-border);
  padding:16px;
  background:var(--as-bg);
  color:var(--as-fg);
  border-radius:8px;
  align-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  max-width:340px;
  margin:0 auto;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.as-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 16px rgba(0,0,0,0.15);
}
.as-card .as-image{flex-shrink:0;width:100%;text-align:center;display:flex;justify-content:center;align-items:center;margin:8px auto}
.as-card .as-image img{max-width:200px;height:auto;object-fit:contain;background:#fff;border-radius:4px}
.as-card .as-body{flex:1;min-width:0;display:flex;flex-direction:column;width:100%;text-align:center;align-items:center}
.as-card .as-btn,
.as-card a.as-btn{
  display:block !important;
  width:100% !important;
  max-width:280px !important;
  margin:8px auto 0 auto !important;
  background:#82b440 !important;
  color:#fff !important;
  padding:12px 20px !important;
  border-radius:4px !important;
  text-decoration:none !important;
  font-weight:600 !important;
  font-size:14px !important;
  border:none !important;
  cursor:pointer !important;
  visibility:visible !important;
  opacity:1 !important;
  line-height:1.4 !important;
  text-align:center !important;
  box-sizing:border-box !important;
  text-indent:0 !important;
  overflow:visible !important;
  white-space:normal !important;
  font-family:inherit !important;
}
.as-title{font-size:15px;margin:0 0 8px 0;font-weight:400;line-height:1.3;color:#111 !important;text-align:center}

/* Badges - Taille uniforme petite */
.as-badge.as-prime,
.as-badge.as-promo{
  display:inline-block;
  border-radius:3px;
  padding:2px 5px;
  font-size:10px;
  font-weight:600;
  line-height:1.2;
  vertical-align:middle;
  white-space:nowrap;
}
.as-badge.as-prime{background:#00a8e1 !important;color:#fff !important;margin:4px auto;display:block;width:fit-content}
.as-badge.as-promo{background:#dc2626 !important;color:#fff !important;margin:4px auto;display:block;width:fit-content}

.as-price{font-weight:700;font-size:20px;margin:8px auto;color:#111 !important;text-align:center;width:100%}
.as-updated{font-size:11px;color:var(--as-muted);margin-top:8px;display:flex;align-items:center;gap:4px;justify-content:center}
a.as-btn,
a.as-btn:link,
a.as-btn:visited,
.as-card a.as-btn,
.as-list-item a.as-btn{
  display:block !important;
  width:100% !important;
  max-width:280px !important;
  margin:8px auto 0 auto !important;
  background:#82b440 !important;
  color:#fff !important;
  padding:12px 20px !important;
  border-radius:4px !important;
  text-decoration:none !important;
  font-weight:600 !important;
  font-size:14px !important;
  transition:background .2s;
  border:none !important;
  cursor:pointer !important;
  visibility:visible !important;
  opacity:1 !important;
  line-height:1.4 !important;
  text-align:center !important;
  box-sizing:border-box !important;
  text-indent:0 !important;
  overflow:visible !important;
  white-space:normal !important;
  font-family:inherit !important;
}
a.as-btn:hover,
.as-card a.as-btn:hover,
.as-list-item a.as-btn:hover{
  background:#6d9936 !important;
  color:#fff !important;
  text-decoration:none !important;
}
.as-btn:focus{outline:2px solid #000;outline-offset:2px}
.as-rating .as-star{color:#f59e0b;margin-right:1px}
.as-rating .as-star.empty{color:#d1d5db}

/* Grid layout - Multiple products vertical cards */
.as-list.as-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.as-list.as-grid.columns-2{grid-template-columns:repeat(2,1fr)}
.as-list.as-grid.columns-3{grid-template-columns:repeat(3,1fr)}
.as-list.as-grid.columns-4{grid-template-columns:repeat(4,1fr)}
.as-list.as-grid.columns-5{grid-template-columns:repeat(5,1fr)}

/* Grid cards - Vertical layout like your example */
.as-list-item{height:100%}
.as-list-item .as-card{
  height:100%;
  flex-direction:column !important;
  padding:16px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  transition:box-shadow .2s;
  align-items:center;
}
.as-list-item .as-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.as-list-item .as-title{
  font-size:13px;
  line-height:1.3;
  min-height:52px;
  margin-bottom:8px;
  text-align:center;
  width:100%;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.as-list-item .as-logo{
  margin:4px 0 8px 0;
  align-self:flex-start;
}
.as-list-item .as-logo img{
  width:50px;
  height:auto;
}
.as-list-item .as-image{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:8px auto;
  min-height:160px;
  flex-shrink:0;
  text-align:center;
}
.as-list-item .as-image img{
  width:auto !important;
  max-width:100%;
  max-height:160px;
  object-fit:contain;
  margin:0 auto;
  display:block;
}
.as-list-item .as-body{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.as-list-item .as-badge.as-prime{
  margin:4px auto;
  display:block;
  text-align:center;
  width:fit-content;
}
.as-list-item .as-badge.as-promo{
  margin:4px auto;
  display:block;
  text-align:center;
  width:fit-content;
}
.as-list-item .as-price{
  font-size:20px;
  font-weight:700;
  margin:8px auto;
  text-align:center;
  width:100%;
}
.as-list-item .as-btn,
.as-list-item a.as-btn{
  width:100%;
  max-width:180px;
  text-align:center;
  margin:12px 0 8px 0;
  padding:10px 16px !important;
  display:inline-block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:#82b440 !important;
  color:#fff !important;
}
.as-list-item .as-updated{
  font-size:9px;
  justify-content:center;
  margin-top:auto;
  padding-top:8px;
}

/* Responsive mobile */
@media (max-width:768px){
.as-list.as-grid{grid-template-columns:repeat(2,1fr);gap:12px}
.as-list.as-grid.columns-2,
.as-list.as-grid.columns-3,
.as-list.as-grid.columns-4,
.as-list.as-grid.columns-5{grid-template-columns:repeat(2,1fr)}
.as-card{flex-direction:column;align-items:center}
.as-card .as-body{width:100%;align-items:center;text-align:center}
.as-card .as-image{width:100%;text-align:center}
.as-card .as-image img{max-width:120px;margin:0 auto}
.as-title{font-size:13px}
.as-price{font-size:18px}
.as-btn{font-size:13px;padding:8px 16px;width:100%;max-width:160px}
.as-list-item .as-btn{display:block !important}
}

@media (max-width:480px){
.as-list.as-grid{grid-template-columns:1fr;gap:10px}
.as-list.as-grid.columns-2,
.as-list.as-grid.columns-3,
.as-list.as-grid.columns-4,
.as-list.as-grid.columns-5{grid-template-columns:1fr}
}

.as-comparison{width:100%;border-collapse:collapse}
.as-comparison th,.as-comparison td{border:1px solid var(--as-border);padding:8px;vertical-align:top}
.as-comparison th img{width:80px;height:auto;display:block;margin:0 auto 6px}
.as-comparison .as-highlight{background:#fff7ed}

.as-mini{display:flex;align-items:center;gap:8px}
.as-mini img{width:48px;height:48px;object-fit:contain}
.as-mini-title{font-size:14px}
.as-mini-price{margin-left:auto;font-weight:700}

.as-disclaimer{font-size:12px;color:var(--as-muted);margin:6px 0}
.as-error{color:#b91c1c;background:#fee2e2;padding:8px;border-radius:8px}

/* Template variations */
.as-card.template-compact{
  max-width:280px;
  padding:12px;
  gap:12px;
}
.as-card.template-compact .as-image img{max-width:140px}
.as-card.template-compact .as-title{font-size:13px}
.as-card.template-compact .as-price{font-size:16px}
.as-card.template-compact .as-btn{font-size:13px;padding:8px 16px}

.as-card.template-wide{
  max-width:100%;
  flex-direction:row;
  align-items:flex-start;
  text-align:left;
}
.as-card.template-wide .as-image{width:auto;text-align:left}
.as-card.template-wide .as-image img{max-width:180px}
.as-card.template-wide .as-body{text-align:left;align-items:flex-start}
.as-card.template-wide .as-title{text-align:left}
.as-card.template-wide .as-btn{margin:8px 0 0 0 !important}

.as-card.template-minimal{
  border:none;
  box-shadow:none;
  padding:12px;
  max-width:260px;
}
.as-card.template-minimal:hover{
  transform:none;
  box-shadow:none;
}
.as-card.template-minimal .as-image img{max-width:160px}
.as-card.template-minimal .as-title{font-size:14px}
.as-card.template-minimal .as-price{font-size:18px;margin:4px 0}

/* AMP Mode - Styles par défaut sans inline styles */
body.amp-mode .as-title {
  font-size: 15px !important;
  color: #000000 !important;
}

body.amp-mode .as-btn,
body.amp-mode a.as-btn,
body.amp-mode .as-card a.as-btn,
body.amp-mode .as-list-item a.as-btn {
  display: inline-block !important;
  background: #82b440 !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  margin-top: 8px !important;
}