/* Orilogy Products Menu (desktop) - reuses the mobile omm-dd dropdown, dropped
   below the header menu and sized to match .headermenu (left + width set by JS).
   Depends on mobile-menu.css for omm-dd / omm-product / omm-shopall styling. */
.opm-shared{
  position:fixed;z-index:99999;display:none;box-sizing:border-box;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.opm-shared.is-open{display:block;}

/* The reused dropdown, made readable as a standalone panel over the page. */
.opm-shared .omm-dd{
  display:flex;flex-direction:column;margin-top:0;
  max-height:86vh;overflow-y:auto;              /* use the viewport so "Shop All" fits without scrolling */
  padding:10px 22px 18px;
  background:rgba(20,30,20,.94);
  -webkit-backdrop-filter:blur(18px) saturate(115%);
  backdrop-filter:blur(18px) saturate(115%);
  box-shadow:0 26px 55px -22px rgba(0,0,0,.5);
}
/* Bigger gap between the product image and its text on desktop. */
.opm-shared .omm-product{gap:30px;padding:16px 6px;}
/* Keep rows compact so all products + the link fit on screen. */
.opm-shared .omm-p-sub{-webkit-line-clamp:2;}

/* On desktop the shop-all link sits inline after the list (not pushed to the
   very bottom like the full-height mobile overlay). */
.opm-shared .omm-shopall{margin-top:16px;}

/* ===========================================================================
   Two-column layout - ONLY when collaborative products have been added.

   Everything above is untouched, so a site with an empty collaborative list
   renders exactly as it always has. The wide layout is purely additive: it
   hangs off .opm-has-collab, which PHP only emits when that list is filled.
   ======================================================================== */

.opm-shared.opm-has-collab {
  --opm-cream: var(--e-global-color-secondary, #f2ebde);
  --opm-ink: var(--e-global-color-primary, #241f20);
  --opm-green: var(--e-global-color-0316a3b, #183b19);
}

.opm-shared.opm-has-collab.is-open{
  display:grid;
  grid-template-columns:minmax(0,46%) minmax(0,54%);
  padding:14px;
  background:var(--opm-cream);
  border-radius:20px;
  box-shadow:0 26px 55px -22px rgba(0,0,0,.45);
}

/* The dark list keeps its own styling but becomes a rounded card inside the
   lighter shell rather than the whole panel. */
.opm-shared.opm-has-collab .omm-dd{
  border-radius:16px;
  box-shadow:none;
  max-height:none;
}

.opm-collab{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:18px 20px 16px 28px;
}

.opm-collab-title{
  margin:0 0 20px;
  font-size:clamp(20px,1.7vw,30px);
  font-weight:400;
  line-height:1.15;
  color:var(--opm-ink);
}

/* The 2-up grid. */
.opm-collab-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 24px;
  min-width:0;
}

/* A row, not a card: image on the left, name and add-to-cart stacked beside
   it. The earlier version made these full-width cards, which read as a
   different component from the list on the left - this keeps both columns in
   the same visual language, just with a much larger thumbnail than before
   (52px was too small to recognise a product by). Descriptions are gone:
   they repeated the same short_description across several products. */
.opm-collab-item{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

.opm-c-thumb{
  flex:0 0 auto;
  display:block;
  width:96px;height:96px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(36,31,32,.05);
}

.opm-c-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

.opm-c-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.opm-c-name{
  font-size:15px;font-weight:500;line-height:1.3;
  color:var(--opm-ink);
  text-decoration:none;
}

.opm-c-name:hover{text-decoration:underline;}

/* Carries WooCommerce's own .button class so wc-add-to-cart recognises it,
   which also means the theme's .button rules (higher specificity than a bare
   .opm-c-cart) were repainting it - dark text on the dark green fill, all but
   unreadable. Scoped through .opm-shared and forcing only the colour
   properties, the same approach used elsewhere against this theme.

   Outlined rather than filled: it sits on the cream panel, where a solid
   green slab fought the product image for attention. */
.opm-shared .opm-collab-item .opm-c-cart{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;
  padding:0 22px;
  background:transparent !important;
  color:var(--opm-ink) !important;
  border:1px solid var(--opm-ink) !important;
  border-radius:999px;
  font-size:13px;font-weight:400;line-height:1;
  text-decoration:none;white-space:nowrap;
  box-shadow:none;
  transition:background-color .2s ease, color .2s ease;
}

.opm-shared .opm-collab-item .opm-c-cart:hover,
.opm-shared .opm-collab-item .opm-c-cart:focus-visible{
  background:var(--opm-ink) !important;
  color:var(--opm-cream) !important;
}

/* WooCommerce toggles these while an ajax add is in flight. */
.opm-shared .opm-collab-item .opm-c-cart.loading{opacity:.55;pointer-events:none;}
.opm-shared .opm-collab-item .opm-c-cart.added{
  background:var(--opm-green) !important;
  border-color:var(--opm-green) !important;
  color:var(--opm-cream) !important;
}

/* Core prints a "View cart" link straight after a successful add. */
.opm-collab-item .added_to_cart{
  font-size:12px;
  color:var(--opm-green);
}

/* Pinned to the bottom of the column so it lines up with "Shop All Products"
   on the left however many rows the grid ends up with. */
.opm-collab-btn{
  margin-top:auto;
  padding-top:18px;
  align-self:flex-start;
  font-size:13px;font-weight:500;
  color:var(--opm-green);
  text-decoration:none;
  border-bottom:1px solid currentColor;
}

.opm-collab-btn:hover{opacity:.75;}

/* Below the two-column breakpoint the panel is not used at all (mobile gets
   the overlay menu), but guard anyway so a narrow desktop cannot squeeze the
   grid into unreadable slivers. */
@media (max-width: 1180px){
  .opm-shared.opm-has-collab.is-open{grid-template-columns:minmax(0,1fr);}
  .opm-collab{padding:18px 6px 4px;}
  .opm-collab-grid{gap:14px 16px;}
}