/* ========== COMMON HEADINGS & WRAPPERS ========== */
.ers-recommended-extras { margin-top: 18px; }

.ers-heading{
  margin: 0 0 12px;
  font: 600 22px/1.3 "Montserrat", sans-serif;
}

.ers-heading-checkout{
  margin: 0 0 12px;
  font: 600 16px/1.3 "Montserrat", sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-align: left;
}

/* ========== PRODUCT & CART (archive-style cards) ========== */
.ers-section ul.products { list-style: none; margin: 0; padding: 0; }

/* Single product grid (desktop) */
.ers-on-product .ers-section ul.products,
.ers-on-product .ers-section ul.products.ers-grid{
  display: grid;
  grid-template-columns: repeat(var(--ers-cols-single, 2), minmax(0, 1fr));
  gap: 18px;
}

/* Cart grid (desktop) */
.ers-on-cart .ers-section ul.products,
.ers-on-cart .ers-section ul.products.ers-grid{
  display: grid;
  grid-template-columns: repeat(var(--ers-cols-cart, 4), minmax(0, 1fr));
  gap: 18px;
}

/* Let the grid control spacing; some themes add margins */
.ers-section ul.products > li.product { margin: 0 !important; }

/* Optional: stock line */
.ers-stock { margin: 6px 0 0; }

/* Mobile columns for both single & cart */
@media (max-width: 768px){
  .ers-on-product .ers-section ul.products,
  .ers-on-product .ers-section ul.products.ers-grid,
  .ers-on-cart .ers-section ul.products,
  .ers-on-cart .ers-section ul.products.ers-grid{
    grid-template-columns: repeat(var(--ers-cols-mobile, 1), minmax(0, 1fr));
  }
}

/* ========== CHECKOUT (FULL-WIDTH BOX, ROWS, PRICE RIGHT) ========== */
.ers-on-checkout { margin: 20px 0; }

.ers-checkout-extras-box{
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: #fff;
  border-radius: 8px;

  --ers-dash-color: #d0d0d0;
  --ers-dash-len: 12px;
  --ers-dash-gap: 12px;

  background:
    repeating-linear-gradient(90deg, var(--ers-dash-color) 0 var(--ers-dash-len), transparent var(--ers-dash-len) calc(var(--ers-dash-len) + var(--ers-dash-gap))) top left/100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--ers-dash-color) 0 var(--ers-dash-len), transparent var(--ers-dash-len) calc(var(--ers-dash-len) + var(--ers-dash-gap))) top right/1px 100% no-repeat,
    repeating-linear-gradient(90deg, var(--ers-dash-color) 0 var(--ers-dash-len), transparent var(--ers-dash-len) calc(var(--ers-dash-len) + var(--ers-dash-gap))) bottom left/100% 1px no-repeat,
    repeating-linear-gradient(180deg, var(--ers-dash-color) 0 var(--ers-dash-len), transparent var(--ers-dash-len) calc(var(--ers-dash-len) + var(--ers-dash-gap))) top left/1px 100% no-repeat;
  border: none;
}

.ers-checkout-extra { margin-bottom: 12px; }
.ers-checkout-extra:last-child { margin-bottom: 0; }

/* 3-column layout desktop: [checkbox] | [image+text] | [price right] */
.ers-extra-line{
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
}

/* Checkbox */
.ers-extra-checkbox{
  width: 18px; height: 18px;
  -webkit-appearance: none; appearance: none;
  border: 1px solid #d8d8d8; border-radius: 3px;
  background: #FBFBFB; cursor: pointer; position: relative;
}
.ers-extra-checkbox:checked{ border-color: #333; }
.ers-extra-checkbox:checked::after{
  content: "✓";
  position: absolute; left: 2px; top: -1px;
  font-size: 14px; line-height: 18px; color: #333;
}

/* Left block: 65x65 image + text */
.ers-extra-left{
  display: grid;
  grid-template-columns: 65px 1fr;
  gap: 10px; align-items: center;
}
.ers-extra-thumb a { display: inline-block; }
.ers-extra-img{ width: 65px; height: 65px; object-fit: contain; }

.ers-extra-main{ display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ers-extra-title{
  font-family: "Montserrat", sans-serif; font-weight: 300;
  font-size: 14px; color: #000; text-decoration: none;
}
.ers-extra-title:hover{ text-decoration: underline; }
.ers-extra-sku{
  font-family: "Montserrat", sans-serif; font-weight: 300;
  font-size: 12px; color: #000; opacity: .85;
}

/* Price on desktop: right aligned */
.ers-extra-price{ justify-self: end; white-space: nowrap; text-align: right; }
.ers-price{ font-family: "Montserrat", sans-serif; font-weight: 300; font-size: 14px; color: #000 !important; }
.ers-price-regular{ color: #000 !important; opacity: .65; margin-right: 8px; text-decoration: line-through; }
.ers-price-sale{ color: #000 !important; text-decoration: none; }
.ers-price-current{ color: #000 !important; }

/* ========== MOBILE: STACK PRICE UNDER INFO ========== */
@media (max-width: 768px){
  .ers-extra-line{
    grid-template-columns: 22px 1fr;
    align-items: start;
  }
  .ers-extra-left{
    grid-column: 2 / 3;
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 10px;
  }
  .ers-extra-price{
    grid-column: 2 / 3;
    justify-self: start;
    text-align: left;
    margin-top: 6px;
  }
}