/* =============================================
   PIXEL-PERFECT OFFER CARDS - PROFESSIONAL VERSION
   Desktop: 3 colunas (3 bottles | 6 bottles | 2 bottles)
   Mobile: 6 → 3 → 2 (empilhado)
   ============================================= */

:root{
  --teal-dark: #0f4c45;      /* dark teal used in center */
  --teal-mid: #0f6b60;       /* border/accents */
  --accent-yellow: #ffd100;  /* button */
  --accent-yellow-dark: #f2c100;
  --soft-gray: #eff3f2;
  --muted: #4a4a4a;
  --white: #ffffff;
  --card-radius: 32px;
  --card-width: 360px;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto, "Helvetica Neue", Arial;
  background: #ffffff; /* section bg - user requested white */
  color: #122;
  -webkit-font-smoothing:antialiased;
}

/* Container */
.section-wrap{
  padding: 48px 24px;
  display:flex;
  justify-content:center;
}

.offers {
  display: flex;
  gap: 26px;
  width: 1200px; /* main desktop width */
  max-width: calc(100% - 48px);
  align-items: stretch;
  justify-content: center;
}

/* Card base */
.card{
  width: var(--card-width);
  border-radius: var(--card-radius) !important;
  background: var(--white);
  display:flex;
  flex-direction:column;
  overflow: visible;
  border: 3px solid transparent;
  box-shadow: 0 8px 20px rgba(10,12,10,0.06);
  position: relative;
}

/* Thin teal border and rounded outline similar to image */
.card::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: 0 0 0 2px rgba(15,107,96,0.08) inset;
}

/* Header ribbon - full width */
.ribbon{
  display:block;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  font-weight:700;
  font-size:14px;
  text-align:center;
  color: #0d2f2d;
  background: linear-gradient(180deg,#1f746a,#0e5f55);
  color: #e6f7f5;
  text-transform: none;
  width: 100%;
}

/* different ribbons */
.ribbon--basic{
  background: linear-gradient(180deg,#24827a,#1b6a63);
  color:#ffffff;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,0.04);
}
.ribbon--best{
  background: linear-gradient(180deg,#ffffff,#f5f5f2);
  color: #0a3f37;
  border: 3px solid #e8efe9;
  font-weight:800;
}
.ribbon--popular{
  background: linear-gradient(180deg,#1f7a70,#166358);
  color:#e7fbf7;
}

/* Content */
.card-inner{
  padding: 24px 28px 28px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
}

.qty {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #0b2a28;
  margin-top: 6px;
}
.supply {
  font-size:20px;
  color: var(--muted);
  margin-top: -12px;
  font-weight:600;
}

.product-image{
  margin: 10px 0 4px 0;
}
.product-image img{
  width: 277px;
  height: auto;
  display:block;
  transform: translateY(0);
}

.price {
  font-size: 66px; /* 44px + 50% = 66px para os números */
  font-weight: 800;
  margin-top: 6px;
  color: #061a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.price::before {
  content: "$";
  font-size: 22px; /* 44px - 50% = 22px para o $ */
  margin-right: -4px;
}
.price small{
  display: flex;
  flex-direction: column;
  font-size:13px;
  font-weight:700;
  color: var(--muted);
  line-height: 1;
}
.price small::after{
  content: "BOTTLE";
  margin-top: 2px;
}

/* dotted separators - removed, now using individual feature borders */

/* features list */
.features {
  font-size:13px;
  color: var(--muted);
  text-align:center;
  width:100%;
  line-height:1.6;
  font-weight:600;
}
.features li{
  margin:0;
  list-style: none;
  position: relative;
  padding: 8px 0;
  border-bottom: 1px dashed #000;
}
.features li:first-child{
  border-top: 1px dashed #000;
}

/* White dashed lines for best card (6 bottles) */
.card--best .features li{
  border-bottom: 1px dashed #fff;
}
.card--best .features li:first-child{
  border-top: 1px dashed #fff;
}

/* Specific colors for savings text */
.features .save-green {
  color: #0f8a75;
}

.features .save-yellow {
  color: #ffd100;
}

/* FREE text in yellow for best card */
.card--best .free-text {
  color: #ffd100;
  font-weight: 800;
}

/* Shipping text in white for best card */
.card--best .shipping {
  color: #ffffff !important;
}
.features li:before{
  content: "✓ ";
  color: #0f8a75;
  font-weight:700;
  margin-right: 4px;
}

/* buy button */
.buy-wrap{ width:100%; display:flex; justify-content:center; margin-top: 10px; }
.btn-buy{
  width: 90%;
  padding: 14px 18px;
  border-radius: 10px;
  font-weight: 800;
  font-size:16px;
  border: none;
  cursor:pointer;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
}
.btn-buy--neutral{
  background: linear-gradient(180deg,#e9e9e9,#dcdcdc);
  color:#1a1a1a;
  border: 1px solid rgba(0,0,0,0.06);
}
.btn-buy--best{
  background: linear-gradient(180deg,var(--accent-yellow),var(--accent-yellow-dark));
  color: #043a33;
  box-shadow: 0 6px 0 rgba(0,0,0,0.06) inset;
  border: 3px solid rgba(0,0,0,0.02);
}

/* payment icons */
.payments{
  width:100%;
  margin-top: 12px;
  display:flex;
  justify-content:center;
  gap:8px;
}
.payments img{ height:29px; width:auto; filter: saturate(0.9); opacity:0.95; max-width: 240px; }

.total {
  margin-top: 12px;
  font-weight:700;
  font-size:14px;
  color:#0e2523;
  text-align:center;
}
.total .strike{ text-decoration: line-through; color: #b92b2b; font-weight:600; margin-right:6px; }
.total .shipping{ display:block; color:#c62828; font-weight:800; margin-top:6px; font-size:13px; }

/* Best card special styling to mimic central darker column */
.card--best{
  background: linear-gradient(180deg, var(--teal-dark), #083f39);
  color: #fff;
  border-radius: 32px !important;
  padding-top: 0;
  box-shadow: 0 18px 40px rgba(4,20,18,0.35);
  transform: translateY(-6px);
  border: 4px solid #ffffff;
}
.card--best .card-inner{ background: transparent; padding: 22px; }
.card--best .ribbon--best{ background: linear-gradient(180deg,#fff,#fff); color:#064039; border-radius: 32px 32px 0 0; font-size:15px; padding:12px 14px; margin: 0; }
.card--best .qty, .card--best .supply, .card--best .price { color: #ffffff; text-shadow: 0 2px 0 rgba(0,0,0,0.15); }
.card--best .price small, .card--best .price small::after { color: #ffffff; }
.card--best .features li:before{ color: #ffd100; }
.card--best .features, .card--best .total { color: #eaf7f3; opacity:0.95; }

/* outline accent on other cards */
.card--side{ border: 3px solid #0f6b60; }

/* Sizes tweak for headings in side cards */
.card--side .ribbon{ font-size:13px; font-weight:700; }

/* hover effect */
.card:hover{ transform: translateY(-6px); transition: transform .28s ease, box-shadow .28s ease; box-shadow: 0 18px 36px rgba(8,24,20,0.08); }

/* Layout order classes to control desktop/mobile ordering */
.col-3 { order:1; } /* left on desktop */
.col-6 { order:2; } /* center on desktop */
.col-2 { order:3; } /* right on desktop */

/* RESPONSIVE */
@media (max-width: 1050px){
  .offers{ width: 100%; gap:18px; justify-content:center; }
  :root{ --card-width: 340px; }
}

@media (max-width: 780px){
  .section-wrap{ padding: 20px 12px; }
  .offers{
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  /* Mobile order: start with 6 bottles, then 3, then 2 */
  .col-6 { order: 1 !important; }
  .col-3 { order: 2 !important; }
  .col-2 { order: 3 !important; }

  /* full width cards on mobile */
  .card{ width: 100%; max-width: 520px; border-radius: 32px !important; }
  .card--best{ transform: none; }
}

/* micro adjustments for typography small screens */
@media (max-width:420px){
  .qty{ font-size: 28px; }
  .price{ font-size: 36px; }
  .product-image img{ width: 234px; }
}