/* Grid */
.bg-section{margin:2rem 0}
.bg-container{max-width:1200px;margin:0 auto;padding:0 1rem}
.bg-row{display:grid;gap:30px;grid-template-columns:repeat(var(--bg-cols,3), minmax(0,1fr))}
.bg-card{border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column;height:100%}

/* Image container: limit height and center image */
.bg-section .product .bg-image{
  max-height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden; /* avoids layout jumps */
}
.bg-section .product .bg-image img{
  max-height:400px;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.bg-name{font-size:20px!important;margin:0.75rem 1rem 0.25rem}
.bg-type{opacity:.8;margin:0 1rem 0.5rem}
.bg-desc{padding:0 1rem 0.5rem}
.bg-buy{margin-top:auto;padding:0.75rem 1rem 1rem;border-top:1px solid #f2f2f2}
.bg-price{font-weight:700}
.bg-price-suffix{font-size:.9rem;opacity:.8;margin:0.25rem 0 0.75rem}
.bg-btn{display:inline-block;text-decoration:none;border:0;background:#111;color:#fff;padding:.6rem 1rem;border-radius:8px}
.bg-btn:hover{opacity:.92}

/* Drawer */
.bg-side-cart{position:fixed;top:0;right:-420px;width:380px;max-width:90vw;height:100%;background:#fff;box-shadow:-2px 0 20px rgba(0,0,0,.15);transition:right .25s ease;z-index:9999}
.bg-side-cart.open{right:0}
.bg-side-cart .inner{display:flex;flex-direction:column;height:100%}
.bg-side-cart .cart-title{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee}
.bg-side-cart .cart-items{padding:10px 16px;overflow:auto;flex:1}
.bg-side-cart .cart-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #f3f3f3}
.bg-side-cart .image img{width:64px;height:64px;object-fit:cover;border-radius:6px}
.bg-side-cart .actions{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bg-side-cart .qty-changer a{display:inline-block;padding:2px 6px;border:1px solid #ddd;border-radius:4px;text-decoration:none}
.bg-side-cart .qty-changer a + a{margin-left:6px}
.bg-side-cart .total{display:flex;justify-content:space-between;padding:12px 16px;border-top:1px solid #eee}
.bg-side-cart .order-container{padding:0 16px 16px}
.bg-side-cart .btn-primary{display:flex;align-items:center;gap:8px;justify-content:center;background:#111;color:#fff;border:0;border-radius:8px;padding:12px 14px;cursor:pointer;width:100%}
.close-side-cart{background:none;border:0;font-size:20px;cursor:pointer}

/* Modal */
.bg-order-modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:10000}
.bg-order-modal.open{display:block}
.bg-order-modal .modal-dialog{background:#fff;max-width:640px;margin:8vh auto;padding:20px;border-radius:12px;position:relative}
.bg-order-modal .modal-close{position:absolute;top:10px;right:12px;background:none;border:0;font-size:22px;cursor:pointer}
#bg-order-form .grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
#bg-order-form .grid label{display:flex;flex-direction:column;font-size:.95rem}
#bg-order-form .grid label.consent{grid-column:1/-1;flex-direction:row;gap:8px;align-items:center}
#bg-order-form button.btn-primary{margin-top:8px}
#bg-order-form .form-status{margin-top:8px;font-size:.95rem}
@media (max-width:600px){ #bg-order-form .grid{grid-template-columns:1fr} }


/* === Unified form field styling === */
#bg-order-form input[type='text'],
#bg-order-form input[type='email'],
#bg-order-form input[type='tel'],
#bg-order-form input[type='number'],
#bg-order-form input[type='url'],
#bg-order-form input[type='search'],
#bg-order-form textarea,
#bg-order-form select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: #f5f7f9;
  border: 1px solid #e5eaef;
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.4;
  font-size: 16px;
  color: #222;
  outline: none;
}
#bg-order-form textarea { min-height: 120px; resize: vertical; }
#bg-order-form input::placeholder, #bg-order-form textarea::placeholder { color:#9aa4b2; }
#bg-order-form input:focus, #bg-order-form textarea:focus, #bg-order-form select:focus {
  border-color: #1ea7fd;
  box-shadow: 0 0 0 3px rgba(30,167,253,0.2);
}
#bg-order-form label { gap: 6px; }


/* === Unified form field styling v1.3.4 === */
#bg-order-form input:not([type='checkbox']):not([type='radio']),
#bg-order-form textarea,
#bg-order-form select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: #f5f7f9;
  border: 1px solid #e5eaef;
  border-radius: 8px;
  padding: 12px 14px;
  line-height: 1.4;
  font-size: 16px;
  color: #222;
  outline: none;
}
#bg-order-form textarea { min-height: 120px; resize: vertical; }
#bg-order-form input::placeholder, #bg-order-form textarea::placeholder { color:#9aa4b2; }
#bg-order-form input:focus:not([type='checkbox']):not([type='radio']), #bg-order-form textarea:focus, #bg-order-form select:focus {
  border-color: #1ea7fd;
  box-shadow: 0 0 0 3px rgba(30,167,253,0.2);
}
/* Normalize autofill */
#bg-order-form input:-webkit-autofill { box-shadow: 0 0 0 1000px #f5f7f9 inset; -webkit-text-fill-color:#222; }