:root{
  --omar-color: #737373;        /* NEW color requested */
  --omar-radius: 12px;
  --omar-circle-size: 32px;
  --omar-fill-scale: 28;        /* tweak if cards wider */
  --omar-fill-duration: 1400ms; /* animation duration */
}

/* wrapper/title */
#omar-menu-wrap{ margin: 16px 0 22px; font-family: inherit; }
.omar-menu-title{ margin:0 0 12px; font-size:20px; font-weight:700; color: #111; }

/* group header */
.omar-group{ margin: 16px 0 20px; }
.omar-group-head{ display:flex; gap:10px; align-items:flex-start; margin-bottom:8px; }
.omar-dot{ width:10px; height:10px; border-radius:999px; background: var(--omar-color); margin-top:6px; }
.omar-group-title{ font-weight:700; font-size:15px; }

/* cards container */
.omar-cards{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  touch-action: pan-x;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

/* card base */
.omar-card{
  min-width:210px;
  max-width:260px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border:2px solid #e6e6e6;
  border-radius: var(--omar-radius);
  background: #fff;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .22s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  position:relative;
  justify-content: space-between;
  overflow: hidden;
}

/* hover / focus: border color becomes new color */
.omar-card:hover,
.omar-card:focus-within{
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  border-color: var(--omar-color);
  outline: none;
}

/* expanding fill pseudo-element (starts at circle pos, grows slowly) */
.omar-card::before{
  content: '';
  position: absolute;
  right: calc(12px + var(--omar-circle-size) / 2);
  top: 50%;
  width: calc(var(--omar-circle-size));
  height: calc(var(--omar-circle-size));
  transform: translateY(-50%) scale(0);
  transform-origin: center center;
  border-radius: 50%;
  background: var(--omar-color);
  z-index: 0;
  transition: transform var(--omar-fill-duration) cubic-bezier(.2,.9,.2,1), opacity 300ms ease;
  will-change: transform;
  pointer-events: none;
  opacity: 0.999;
}

/* when selected: expand to cover card (slow) */
.omar-card.selected::before{
  transform: translateY(-50%) scale(var(--omar-fill-scale));
}

/* keep content above the fill */
.omar-card-content, .omar-card-plus { position: relative; z-index: 2; }

/* text color changes to white when selected */
.omar-card-text{
  font-size:14px;
  line-height:1.25;
  color:#111;
  transition: color 380ms ease;
  flex:1;
}
.omar-card.selected .omar-card-text{ color: #fff; }

/* hide native checkbox visually (but accessible) */
.omar-card-input{ position:absolute; left:-9999px; }

/* circle button — force perfect circle and protect from theme overrides */
.omar-card-plus{
  box-sizing: border-box !important;
  width: var(--omar-circle-size) !important;
  height: var(--omar-circle-size) !important;
  min-width: var(--omar-circle-size) !important;
  min-height: var(--omar-circle-size) !important;
  border-radius: 50% !important;
  display:inline-grid !important;
  place-items:center !important;
  flex:0 0 var(--omar-circle-size) !important;
  padding:0 !important;
  border:none !important;
  background: var(--omar-color) !important; /* circle background uses new color */
  color:#fff !important;
  cursor:pointer;
  margin-left: 12px;
  overflow: visible;
  line-height:0 !important;
  transition: transform .14s ease, box-shadow .14s ease, background .18s ease, opacity .18s ease;
}

/* the <img> icon inside circle */
.omar-card-plus img.omar-icon-plus{
  display:block !important;
  width: 60% !important;
  height: 60% !important;
  max-width: 20px !important;
  max-height: 20px !important;
  object-fit: contain !important;
  pointer-events: none;
  user-select: none;
  opacity: 1;
  transform: scale(1);
  transition: opacity 260ms ease, transform 260ms ease;
}

/* when selected: fade the icon out (fill covers it) */
.omar-card.selected .omar-card-plus img.omar-icon-plus{
  opacity: 0;
  transform: scale(.6);
}

/* subtle hover on circle */
.omar-card-plus:hover{
  transform: translateY(-2px);
  background: var(--omar-color) !important;
}

/* note row */
.omar-note-row{ margin-top:10px; }
.omar-note-toggle{ font-size:14px; text-decoration:underline; opacity:.95; cursor:pointer; }
.omar-note-field{ display:none; width:100%; min-height:70px; margin-top:8px; padding:10px; border:1px solid #e9e9e9; border-radius:10px; }
.omar-note-field.show{ display:block; }

/* desktop grid layout */
@media (min-width:768px){
  .omar-cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:12px;
    overflow:visible;
    padding-bottom:0;
  }
  .omar-card{ min-width:unset; }
}


/* ============================
   OVERRIDE: border color only
   Keeps everything else untouched.
   ============================ */

:root{
  --omar-border-color: #737373; /* THE color you requested */
}

/* Make sure hover / focus / selected borders use the new color */
.omar-card:hover,
.omar-card:focus-within,
.omar-card.selected {
  border-color: var(--omar-border-color) !important;
}

/* If any rule targets :hover on internal elements and changes the card border,
   force the parent card border color too (high specificity) */
.omar-card:hover,
.omar-card:hover * {
  border-color: var(--omar-border-color) !important;
}

/* Some themes set outline instead of border on focus — normalize that too */
.omar-card:focus,
.omar-card:focus-within,
.omar-card.selected:focus,
.omar-card.selected:focus-within {
  outline: none !important;
  border-color: var(--omar-border-color) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04); /* keep existing subtle lift */
}

/* If add-to-cart or other scripts toggle a class like .active, cover it */
.omar-card.active,
.omar-card.is-active,
.omar-card.open,
.omar-card[aria-pressed="true"] {
  border-color: var(--omar-border-color) !important;
}

/* if the theme added a focused pseudo-element that looks like a blue ring,
   neutralize common selectors to avoid the blue visual */
.omar-card:focus::after,
.omar-card:focus::before,
.omar-card.selected::after,
.omar-card.selected::before {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* small safeguard for inputs that might change border via :focus inside the card */
.omar-card input:focus,
.omar-card button:focus {
  outline: none !important;
  box-shadow: none !important;
}