/* Container and controls */
.rocgm{
  border:1px 
  solid #e0e0e0;
  padding:12px;
}

.rocgm-controls{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:12px; 
  align-items: flex-end; 
  justify-content: flex-start; 
  padding: 5px 0;
}

.rocgm-controls label {
  display: flex;
  flex-direction: column;
  font-weight: 600;
  margin: 0;
}

.rocgm-controls select,
.rocgm-controls input[type="text"] {
  width: 180px;
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Search Button */
#rocgm-search-btn {
    padding: 5px 14px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#rocgm-search-btn:hover{background:#005f8d}

/* Search Field  */
#rocgm-search {
    border-radius: 4px;
    border-width: 1px;
    font-size: 16px;
}

/* Brand Select Field  */
#rocgm-brand {
    font-size: 16px;
    padding: 10px;
    border-radius: 4px;
    border-width: 1px;
}

/* Results grid */
.rocgm-results {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 20px;
}

.rocgm-pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin: 0 0 40px 0;
}

.rocgm-page-btn{
  padding:5px 14px;
  font-size:14px;
  background:#0073aa;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
}

.rocgm-page-btn:hover{background:#005f8d}
.rocgm-page-btn:disabled{
  background:#9ea7ad;
  cursor:not-allowed;
}

.rocgm-page-info{
  font-size:14px;
  color:#333;
}

/* Adjust to 2 columns on medium screens */
@media (max-width: 900px) {
  .rocgm-results {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Stack to 1 column on small screens */
@media (max-width: 600px) {
  .rocgm-results {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* Result card */
.rocgm-card{
  position:relative;
  display:flex;
  flex-direction:column;          /* stack content vertically */
  justify-content:space-between;  /* space out content */
  border:1px solid #ccc;
  padding:8px;
  text-align:center;
  background:#fff;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,0,0,0.1);
  transition:transform .2s ease, box-shadow .2s ease;
  height:100%;
  min-height:280px;               /* adjust overall card height if needed */
}
.rocgm-card:hover{
  transform:translateY(-3px);
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
}

/* Product image in result card */
.rocgm-card-image{
  width:100%;
  height:70%;                     /* your change to fit tall images better */
  object-fit:contain;
  margin-bottom:6px;
}

/* Title and SKU in result card */
.rocgm-card > div{                /* the title div we append */
  font-size:14px;
  font-weight:600;
  line-height:1.25;
  margin:0 0 6px 0;
  word-break:break-word;
}
.rocgm-card > small{              /* the SKU small tag we append */
  display:block;
  font-size:12px;
  color:#444;
}

/* Add button pinned to bottom */
.rocgm-card button{
  margin-top:auto;                /* pushes button to the bottom of card */
  align-self:center;
  padding:5px 14px;
  font-size:16px;
  background:#0073aa;
  color:#fff;
  border:none;
  border-radius:4px;
  cursor:pointer;
}
.rocgm-card button:hover{background:#005f8d}
.rocgm-card button.is-added{background:#2e7d32}
.rocgm-card button.is-added:hover{background:#1b5e20}

/* Selected list */
.rocgm-selected ul{
  list-style:disc;
  padding-left:18px;
  font-size: 16px;
}

.rocgm-selected li{
  padding-bottom:10px;
}

.rocgm-remove-btn {
  padding: 4px 10px;
  margin-left: 10px;
  background: #dc3545;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.rocgm-remove-btn:hover {
  background: #b02a37;
}

/* Preview page boxes on the builder screen (not print) */
.rocgm-previewpage{
  width:272.13px;                 /* ~72mm in px at 96dpi */
  height:385.51px;                /* ~102mm in px at 96dpi */
  border:1px dotted #aaa;
  margin:8px;
  position:relative;
  box-sizing:border-box;
}
/* Print Button */
#rocgm-print-btn {
    padding: 5px 14px;
    background: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#rocgm-print-btn:hover{background:#005f8d}

#rocgm-clear-btn {
    padding: 5px 14px;
    margin-left: 8px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

#rocgm-clear-btn:hover{background:#5a6268}

#rocgm-preview-btn { display: none !important; }