/*-------------------------------------------*
 *  Item
/*-------------------------------------------*/
.btn-brown {
  background-color: #a0522d; /* 茶色の背景 */
  color: #ffffff; /* 白色の文字 */
  border: 1px solid #a0522d; /* 茶色の境界線 */
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-brown:hover {
  background-color: #8b4513; /* ホバー時の少し濃い茶色 */
  color: #ffffff;
  border: 1px solid #8b4513;
}

.btn-brown-active {
  background-color: #ffffff; /* 白色の背景 */
  color: #a0522d; /* 茶色の文字 */
  border: 1px solid #a0522d; /* 茶色の境界線 */
}

.btn-brown-active:hover {
  background-color: #f0f0f0; /* ホバー時のわずかに薄い灰色 */
  color: #a0522d;
  border: 1px solid #a0522d;
}

/*-------------------------------------------*/
/*  Item specific adjustments for 992px-1199.98px */
/*-------------------------------------------*/
@media (min-width: 768px) and (max-width: 1199.98px) {
  #item .container {
    max-width: none !important; /* Remove Bootstrap's max-width for this breakpoint */
    width: 100% !important; /* Ensure it takes full width */
    padding-left: 0 !important; /* Remove px-3 padding */
    padding-right: 0 !important; /* Remove px-3 padding */
  }

  /* If there are other specific containers inside item, might need to adjust them too */
  #item .container.px-3,
  #item .container.my-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Item specific adjustments for extra small screens (smartphones) */
@media (max-width: 575.98px) {
  #item .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .product-card .card-img-top {
    padding: 0 !important; /* Reduce image padding from p-3 (1rem) */
  }
  .product-card .card-body {
    padding: 0 !important; /* Reduce default card-body padding */
  }
  /* Reduce gutter between product cards on small screens */
  .product-list {
    --bs-gutter-x: 0.5rem; /* Horizontal gutter */
    --bs-gutter-y: 0.5rem; /* Vertical gutter */
  }
}