/* Header */
.jmt-header { background: #333; color: #fff; padding: 1em; text-align: center; }
/* Container layout */
.jmt-container { display: flex; }
/* Sticky sidebar */
.jmt-sidebar { width: 200px; padding: 1em; background: #f9f9f9; position: sticky; top: 0; height: calc(100vh - 60px); overflow: auto; }
/* Category list */
.jmt-category-list { list-style: none; padding: 0; font-size:1rem}
.jmt-category-list li { cursor: pointer; margin: 0.5em 0; }
/* Main content area */
.jmt-main { flex: 1; padding: 1em; }
/* Product grid */
.jmt-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
/* Product item */
.jmt-product { text-align: center; cursor: pointer; }
.jmt-product img { width: 100%; height: 150px; object-fit: cover; }
/* Modal styles */
.jmt-modal { position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; }
.jmt-modal-content { background:#fff; padding:1em; width:90%; max-width: 800px; position:relative; }
.jmt-modal-close { position:absolute; top:10px; right:10px; cursor:pointer; font-size:1.5em; }
/* Form and buttons */
.jmt-button { padding:0.5em 1em; margin-top:1em; }
.jmt-form { margin-top:2em; }

/* Modal attributes two-column grid */
.jmt-attributes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em 1em;
  margin: 1em 0;
}
.attr-name { font-weight: bold; }
.attr-value { }
/* Ensure modal image */
.jmt-modal-content img { width: 100%; height: auto; margin-bottom: 1em; }



.attr-name { font-weight: bold; }
.attr-value {}

 

 
.jmt-modal-content img {
 
  width: 100%;
  height: auto;
  margin-bottom: 0;
}
 
.jmt-attributes-grid .attr-name {
  font-weight: normal;
}
.jmt-modal-close {
  top: 0.5em;
  right: 0.5em;
}

/* Limit height of attributes grid and make scrollable */


/* Style for true value checkmark */
.attr-true {
  color: green;
  font-weight: bold;
}


/* Attributes four-column grid with scroll */
.jmt-attributes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em 1em;
  overflow-y: auto;
}
.attr-name { font-weight: bold; }
.attr-value {}
.attr-true { color: green; }

/* Modal layout unchanged */

 
.jmt-modal-content img {
 
  max-height: 200px;
  object-fit: contain;
  margin-bottom: 1em;
}
 

/* Modal content wider for proper columns */
.jmt-modal-content {
  width: 90%;
  max-width: 800px;
  margin: auto;
}

/* Modal content max width and attributes column */
.jmt-modal-content {
  max-width: 800px !important;
}
 


/* Modal adjustments */
.jmt-modal-content {
  max-width: 800px !important;
}
 

 
.jmt-modal-left img {
  width: 100%;
  height: auto;
}
.jmt-modal-left, .jmt-modal-right {
  padding: 0 1em;
}


/* Force two-column layout in modal body */
 
.jmt-modal-left, .jmt-modal-right {
  padding: 0 1em;
}


/* Modal left/right container */
.modal-container {
  display: flex;
  flex-wrap: wrap;
}
.modal-left, .modal-right {
  box-sizing: border-box;
  padding: 1em;
  flex: 1 1 50%;
}
/* Responsive on small screens */
@media (max-width: 320px) {
  .jmt-modal-content {
 
    max-width: 320px !important;
  }
  .modal-left, .modal-right {
    flex: 1 1 100%;
  }
}
  .jmt-attributes-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.3em 1em !important;
  max-height: 350px !important;
  overflow-y: auto;
  font-size: 0.8rem !important;line-height: 117%;
}


/* Modal container left/right */
.modal-container {
  display: flex !important;
  flex-wrap: wrap !important;
}
 
/* Responsive mobile */
@media (max-width: 320px) {
  .jmt-modal-content {
    width: 90% !important;
    max-width: 320px !important;
  }
  .modal-left, .modal-right {
    flex: 1 1 100% !important;
  }
}

/* Responsive grid for main product list */
.jmt-products-grid {
  display: grid !important;
  grid-gap: 1em !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
/* Ensure each product card centers its content */
.jmt-product {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}


/* Modal layout left/right */
.modal-container {
  display: flex !important;
  flex-wrap: wrap !important;
}
.modal-left, .modal-right {
  box-sizing: border-box !important;
  padding: 1em !important;
  flex: 1 1 50% !important;
}
/* Attributes table */
.jmt-attr-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.jmt-attr-table th {
  text-align: left;
  padding: 0.25em;
  font-weight: bold;
  vertical-align: top;
}
.jmt-attr-table td {
  padding: 0.25em;
}
/* Responsive stacking */
@media (max-width: 480px) {
  .modal-left, .modal-right {
    flex: 1 1 100% !important;
  }
}

/* Modal left/right container */
.modal-container {
  display: flex !important;
  flex-wrap: wrap !important;
}
/* Left section styling */
.modal-left {
  flex: 1 1 50% !important;
  box-sizing: border-box;
  padding: 1em;
}
.modal-left img {
  max-width: 100%;
  height: auto;
  margin-bottom: 0.5em;
}
/* Right section styling */
.modal-right {
  flex: 1 1 50% !important;
  box-sizing: border-box;
  padding: 1em;
}
/* Attributes table */
.jmt-attr-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.jmt-attr-table th {
  text-align: left;
  padding: 0.25em;
  font-weight: bold;
  vertical-align: top;
}
.jmt-attr-table td {
  padding: 0.25em;
}
/* Responsive: stack on narrow screens */
@media (max-width: 480px) {
  .modal-left, .modal-right {
    flex: 1 1 100% !important;
  }
}


/* Modal content layout */
.jmt-modal-content {
  max-width: 800px !important;
  display: flex;
  flex-wrap: wrap;
  padding: 1em;
  max-height: 80vh; /* Limits modal height to 80% of viewport */
  overflow-y: auto; /* Scroll if content exceeds */
}

/* Left column for image, name, and description */
.modal-left {
  flex: 1 1 50%;
  padding: 0 1em 0 0;
  box-sizing: border-box;
}
p.description {font-size: 0.9rem; font-weight: normal}
/* Right column for attributes */
.modal-right {
  flex: 1 1 50%;
  padding: 0 0 0 1em;
  box-sizing: border-box;
}

/* Style for image in modal */
.jmt-modal-content img {
  width: 100%;
  height: auto;
  max-height: 150px; /* Compact image height */
  object-fit: contain;
  margin-bottom: 0.5em;
}

 

/* Responsive adjustments */
@media (max-width: 600px) {
  .jmt-modal-content {
    max-width: 100%;
  }
  .modal-left, .modal-right {
    flex: 1 1 100%;
    padding: 0;
  }
  .modal-right .jmt-attributes-grid {
    grid-template-columns: 1fr; /* Single column on small screens */
  }
}