/**
 * DadaStyle Operations Manager — semantic product card templates.
 *
 * The semantic classes may be consumed by live module markup without taking
 * ownership of its established layout. The isolated renderer/showcase opts
 * into the shared layout explicitly through `dom-product-card--managed`.
 */
.dom-product-card.dom-product-card--managed {
  --dom-product-card-media-size: 56px;
  --dom-product-card-gap: var(--dom-space-3);

  display: grid;
  grid-template-columns: var(--dom-product-card-media-size) minmax(0, 1fr) auto;
  grid-template-areas:
    "media content actions"
    "media quantity actions"
    "message message message";
  gap: var(--dom-product-card-gap);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--dom-space-4);
  color: var(--dom-color-text);
  background: var(--dom-color-surface-subtle);
  border: 1px solid var(--dom-color-border);
  border-radius: var(--dom-radius-lg);
  box-shadow: none;
}

.dom-product-card.dom-product-card--managed *,
.dom-product-card.dom-product-card--managed *::before,
.dom-product-card.dom-product-card--managed *::after {
  box-sizing: border-box;
}

.dom-product-card--managed .dom-product-card__selection {
  grid-area: selection;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dom-touch-target);
  min-height: var(--dom-touch-target);
}

.dom-product-card--managed .dom-product-card__media {
  grid-area: media;
  align-self: start;
  width: var(--dom-product-card-media-size);
  height: var(--dom-product-card-media-size);
  overflow: hidden;
  border-radius: var(--dom-radius-md);
  background: var(--dom-color-surface-muted);
}

.dom-product-card--managed .dom-product-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dom-product-card--managed .dom-product-card__content {
  grid-area: content;
  min-width: 0;
  align-self: start;
}

.dom-product-card--managed .dom-product-card__title {
  margin: 0;
  color: var(--dom-color-text-strong);
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.dom-product-card--managed .dom-product-card__identity-block {
  min-width: 0;
}

.dom-product-card--managed .dom-product-card__identity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--dom-space-1) var(--dom-space-2);
  min-width: 0;
  margin-top: var(--dom-space-1);
  color: var(--dom-color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.dom-product-card--managed .dom-product-card__identity-meta-item {
  min-width: 0;
}

.dom-product-card--managed .dom-product-card__description {
  margin: var(--dom-space-1) 0 0;
  color: var(--dom-color-text-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.dom-product-card--managed .dom-product-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dom-space-1) var(--dom-space-2);
  margin-top: var(--dom-space-1);
  color: var(--dom-color-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.dom-product-card--managed .dom-product-card__meta-item {
  min-width: 0;
}

.dom-product-card--managed .dom-product-card__quantity {
  grid-area: quantity;
  align-self: end;
  justify-self: start;
  min-width: 0;
}

.dom-product-card--managed .dom-product-card__actions {
  grid-area: actions;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--dom-space-2);
  min-width: 0;
}

.dom-product-card--managed .dom-product-card__message {
  grid-area: message;
  min-width: 0;
  color: var(--dom-color-warning);
  font-size: 12px;
  line-height: 1.45;
}

.dom-product-card.dom-product-card--managed.dom-product-card--preview {
  grid-template-areas:
    "media content actions"
    "media content actions"
    "message message message";
}

.dom-product-card.dom-product-card--managed.dom-product-card--preview .dom-product-card__quantity {
  display: none;
}

.dom-product-card.dom-product-card--managed.dom-product-card--selectable {
  grid-template-columns: auto var(--dom-product-card-media-size) minmax(0, 1fr) auto;
  grid-template-areas:
    "selection media content actions"
    "selection media quantity actions"
    "message message message message";
}

.dom-product-card.dom-product-card--managed.dom-product-card--addable,
.dom-product-card.dom-product-card--managed.dom-product-card--deletable {
  grid-template-areas:
    "media content actions"
    "media quantity actions"
    "message message message";
}

.dom-product-card.dom-product-card--managed.dom-product-card--without-media {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "content actions"
    "quantity actions"
    "message message";
}

.dom-product-card.dom-product-card--managed.dom-product-card--selectable.dom-product-card--without-media {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "selection content actions"
    "selection quantity actions"
    "message message message";
}

.dom-product-card.dom-product-card--managed.dom-product-card--without-media .dom-product-card__media {
  display: none;
}

.dom-product-card.dom-product-card--managed.dom-product-card--compact {
  --dom-product-card-media-size: 44px;
  --dom-product-card-gap: var(--dom-space-2);
  padding: var(--dom-space-3);
  border-radius: var(--dom-radius-md);
}

.dom-product-card.dom-product-card--managed.dom-product-card--compact .dom-product-card__title {
  font-size: 14px;
}

.dom-product-card.dom-product-card--managed.dom-product-card--selected {
  border-color: var(--dom-color-accent-border);
  background: var(--dom-color-accent-soft);
}

.dom-product-card.dom-product-card--managed.dom-product-card--disabled {
  color: var(--dom-color-text-muted);
  background: var(--dom-color-surface-muted);
  border-color: var(--dom-color-border);
  box-shadow: none;
}

.dom-product-card.dom-product-card--managed.dom-product-card--disabled .dom-product-card__media,
.dom-product-card.dom-product-card--managed.dom-product-card--disabled .dom-product-card__content,
.dom-product-card.dom-product-card--managed.dom-product-card--disabled .dom-product-card__quantity {
  opacity: 0.68;
}

.dom-product-card.dom-product-card--managed.dom-product-card--disabled [data-dom-product-operation],
.dom-product-card.dom-product-card--managed.dom-product-card--disabled .dom-product-card__selection,
.dom-product-card.dom-product-card--managed.dom-product-card--disabled .dom-product-card__quantity {
  pointer-events: none;
}

.dom-product-card.dom-product-card--managed.dom-product-card--disabled [data-dom-product-operation] {
  opacity: 0.48;
}

.dom-product-card.dom-product-card--managed.dom-product-card--disabled-all {
  pointer-events: none;
  user-select: none;
}

.dom-product-card.dom-product-card--managed.dom-product-card--disabled-all .dom-product-card__actions {
  opacity: 0.48;
}

@media (max-width: 782px) {
  .dom-product-card.dom-product-card--managed {
    --dom-product-card-media-size: 54px;
    padding: var(--dom-space-3);
  }

  .dom-product-card.dom-product-card--managed.dom-product-card--selectable {
    grid-template-columns: auto var(--dom-product-card-media-size) minmax(0, 1fr) auto;
  }

  .dom-product-card--managed .dom-product-card__actions {
    align-self: center;
  }
}

@media (max-width: 420px) {
  .dom-product-card.dom-product-card--managed {
    grid-template-columns: var(--dom-product-card-media-size) minmax(0, 1fr) auto;
  }

  .dom-product-card.dom-product-card--managed.dom-product-card--selectable {
    grid-template-columns: auto var(--dom-product-card-media-size) minmax(0, 1fr);
    grid-template-areas:
      "selection media content"
      "selection media quantity"
      "actions actions actions"
      "message message message";
  }

  .dom-product-card.dom-product-card--managed.dom-product-card--selectable .dom-product-card__actions {
    justify-self: end;
  }

  .dom-product-card.dom-product-card--managed.dom-product-card--without-media {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dom-product-card.dom-product-card--managed.dom-product-card--selectable.dom-product-card--without-media {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "selection content"
      "selection quantity"
      "actions actions"
      "message message";
  }
}

/* v0.6.1.39 — canonical managed QuantityStepper.
 * The operator is the inline SVG from the shared renderer. Neutralise all
 * legacy pseudo-element and text-hiding strategies in migrated cards. */
.dom-product-card--managed .dom-quantity-control__button {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative;
  text-indent: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-image: none !important;
  overflow: visible;
}

.dom-product-card--managed .dom-quantity-control__button::before,
.dom-product-card--managed .dom-quantity-control__button::after {
  content: none !important;
  display: none !important;
}

.dom-product-card--managed .dom-quantity-control__button > .dom-quantity-control__icon {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
}

/* v0.6.1.39.2 — canonical shared stepper wins over legacy module glyph rules.
 * Migrated module compatibility classes can still carry text-indent:-9999px.
 * The shared renderer always owns the inline SVG, so reset the button itself
 * with greater specificity and keep both operators geometrically centered. */
.dom-product-card--managed .dom-quantity-control .dom-quantity-control__button {
  text-indent: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: visible !important;
  background-image: none !important;
}

.dom-product-card--managed .dom-quantity-control .dom-quantity-control__button::before,
.dom-product-card--managed .dom-quantity-control .dom-quantity-control__button::after {
  content: none !important;
  display: none !important;
}

.dom-product-card--managed .dom-quantity-control .dom-quantity-control__icon {
  position: static !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  transform: none !important;
  flex: 0 0 12px !important;
  overflow: visible !important;
}

/* Read-only product card reduced to the only semantic regions it renders. */
.dom-product-card--managed.dom-product-card--readonly-inline {
  display: grid;
  grid-template-columns: var(--dom-product-card-media-size) minmax(0, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "media content";
  align-items: center;
}

.dom-product-card--managed.dom-product-card--readonly-inline > .dom-product-card__actions,
.dom-product-card--managed.dom-product-card--readonly-inline > .dom-product-card__message {
  display: none;
}

/* Shared semantic ProductCard states. Modules derive the state; the card owns the surface. */
.dom-product-card.dom-product-card--managed.dom-product-card--state-warning{
  background:#fffbeb;
  background:color-mix(in srgb,var(--dom-color-warning,#f59e0b) 9%,#fff);
  border-color:#f2c66d;
  border-color:color-mix(in srgb,var(--dom-color-warning,#f59e0b) 48%,var(--dom-color-border,#dcdcde));
}
.dom-product-card.dom-product-card--managed.dom-product-card--state-success{
  background:#f0fdf4;
  background:color-mix(in srgb,var(--dom-color-success,#15803d) 8%,#fff);
  border-color:#86c99a;
  border-color:color-mix(in srgb,var(--dom-color-success,#15803d) 42%,var(--dom-color-border,#dcdcde));
}


/* Shared ProductCard identity link. Modules provide only the URL. */
.dom-product-card--managed .dom-product-card__media-link{
  display:block;
  color:inherit;
  line-height:0;
  border-radius:inherit;
}
.dom-product-card--managed .dom-product-card__title-link{
  color:var(--dom-color-accent,#e3007e);
  text-decoration:none;
}
.dom-product-card--managed .dom-product-card__title-link:hover,
.dom-product-card--managed .dom-product-card__title-link:focus-visible{
  color:color-mix(in srgb,var(--dom-color-accent,#e3007e) 72%,var(--dom-color-text-strong,#172033));
  text-decoration:none;
}


/* v0.8.5.19 — shared decision ProductCard.
 * Read-only identity plus explicit operator actions. Admin/PWA differ only
 * through responsive layout owned by this shared modifier. */
.dom-product-card.dom-product-card--managed.dom-product-card--decision {
  grid-template-columns:var(--dom-product-card-media-size) minmax(0,1fr) auto;
  grid-template-areas:"media content actions";
  grid-template-rows:auto;
  grid-auto-rows:max-content;
  align-items:center;
  gap:14px;
  min-height:0;
  padding:16px;
}
.dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__media,
.dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__content,
.dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__actions {
  align-self:center;
}
.dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__actions {
  justify-self:end;
  gap:10px;
}
.dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__actions .dom-button {
  font-weight:400;
}
.dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__quantity,
.dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__message {
  display:none;
}
@media(max-width:782px){
  .dom-product-card.dom-product-card--managed.dom-product-card--decision {
    grid-template-columns:var(--dom-product-card-media-size) minmax(0,1fr);
    grid-template-areas:"media content" "actions actions";
    gap:12px;
    padding:14px;
  }
  .dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__actions {
    width:100%;
    justify-self:stretch;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__actions .dom-button {
    width:100%;
    justify-content:center;
  }
}
@media(max-width:380px){
  .dom-product-card.dom-product-card--managed.dom-product-card--decision .dom-product-card__actions {
    grid-template-columns:minmax(0,1fr);
  }
}

/* v0.9.7.5 — shared ProductCard gallery modifier (row-aligned operational footer + tighter identity rhythm).
 * Large-image catalogue/workspace cards keep ProductCard anatomy intact while
 * switching only the geometry needed by visual product grids. */
.dom-product-card.dom-product-card--managed.dom-product-card--gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "media"
    "content";
  gap: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background: var(--dom-color-surface, #fff);
  cursor: pointer;
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__media {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 0;
  background: var(--dom-color-surface-muted, #f3f4f6);
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: 6px;
  min-height: 113px;
  height: 100%;
  padding: 12px 12px 9px;
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__identity-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  height: auto;
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 14px;
  line-height: 1.35;
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__identity-meta {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  color: var(--dom-color-text-muted, #64748b);
  font-size: 12px;
  line-height: 1.25;
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__description {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
  line-height: 1.35;
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__meta {
  width: 100%;
  margin-top: auto;
  padding-top: 2px;
}
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__actions,
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__quantity,
.dom-product-card--managed.dom-product-card--gallery .dom-product-card__message {
  display: none;
}
.dom-product-card.dom-product-card--managed.dom-product-card--gallery:hover {
  border-color: color-mix(in srgb, var(--dom-color-accent, #e11d74) 28%, var(--dom-color-border, #dcdcde));
}
.dom-product-card.dom-product-card--managed.dom-product-card--gallery:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--dom-color-accent, #e11d74) 44%, transparent);
  outline-offset: 2px;
}

/* Opt-in inline identity with the existing shared action slot; plain readonly-inline stays unchanged. */
.dom-product-card--managed.dom-product-card--readonly-inline.dom-product-card--readonly-actions{grid-template-columns:var(--dom-product-card-media-size) minmax(0,1fr) auto;grid-template-areas:"media content actions"}
.dom-product-card--managed.dom-product-card--readonly-inline.dom-product-card--readonly-actions>.dom-product-card__actions{display:flex;align-self:center}