/* ==============================
   IO-WB Stripe Cart — Stylesheet
   ==============================
   - Product grid: 3 per row (responsive)
   - Card layout: image on TOP, content below in one column
   - Cart styling (mini cart area)
   - Mini cart icon and subscription register form
*/

/* ------- Product Grid (3 per row) ------- */
.iowb-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .iowb-products { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .iowb-products { grid-template-columns: 1fr; }
}

/* ------- Product Card ------- */
.iowb-card {
  border: 1px solid #555; /* dark grey border */
  background: #fff;
  border-radius: 6px;
  padding: 12px;
}

/* Stack content (image on top, then text) */
.iowb-card-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Top image fills card width */
.iowb-thumb .iowb-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Optional placeholder when no thumbnail */
.iowb-thumb .iowb-img--placeholder {
  width: 100%;
  height: 180px; /* adjust to your liking */
  background: #e9e9e9;
  border-radius: 4px;
}

/* Card body */
.iowb-body { flex: 1 1 auto; }

.iowb-title {
  margin: 2px 0 6px;
  font-size: 1.1rem;
  line-height: 1.25;
}

.iowb-desc {
  color: #444;
  margin-bottom: 8px;
}

.iowb-meta {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
  color: #222;
}

.iowb-price { font-weight: 600; }

.iowb-actions .iowb-add {
  padding: 8px 12px;
  cursor: pointer;
}

/* ------- Mini Cart / Cart Area ------- */
#iowb-cart { margin: 12px 0; }

.iowb-cart-row {
  padding: 6px 0;
  border-bottom: 1px dashed #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.iowb-cart-total {
  margin-top: 8px;
  font-size: 1.1em;
  font-weight: 600;
}

/* Optional: remove button in cart rows */
.iowb-cart-row .iowb-remove {
  background: transparent;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}

/* Buttons general hover (optional) */
.iowb-actions .iowb-add:hover,
.iowb-cart-row .iowb-remove:hover {
  opacity: 0.9;
}

/* ------- Mini cart icon + total ------- */
.iowb-cart-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ddd;
  border-radius: 16px;
  padding: 4px 10px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  line-height: 1;
}
.iowb-cart-icon-wrap {
	  text-align:right;
}
.iowb-cart-icon:hover { background: #f7f7f7; }
.iowb-cart-icon__img { font-size: 16px; }
.iowb-cart-icon__total { font-weight: 600; }

/* ------- Subscription register form ------- */
.iowb-subreg { max-width: 520px; }
.iowb-subreg__row { margin: 10px 0; }
.iowb-subreg input[type="text"],
.iowb-subreg input[type="email"],
.iowb-subreg input[type="password"],
.iowb-subreg select { width: 100%; padding: 8px; }
.iowb-subreg__agree { margin-top: 8px; }

.product-fullwidth-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #0d2a4a; /* customize */
  color: #fff;
}
.product-fullwidth-header__inner {
  max-width: 1200px; /* match your site width */
  margin: 0 auto;
  padding: 24px 20px;
  display: block; /* stacked */
}
.product-fullwidth-header__inner > * { display:block; margin: 6px 0; }