/**
 * Sumaar — the two design details Elementor's own controls cannot express.
 * Everything else on the site is styled through Elementor.
 */

/**
 * 1. Footer logo.
 *
 * The brand mark is plum artwork, which disappears on the plum footer. Elementor's
 * CSS Filters group offers blur/brightness/contrast/saturate/hue but no invert, so
 * the mark is inverted to white here.
 *
 * This applies to any image carrying .sumaar-footer-logo. If a genuinely white
 * logo is supplied later, drop that class from the footer image widget rather
 * than adding the file — inverting an already-white mark would turn it dark.
 */
.sumaar-footer-logo img {
  filter: brightness(0) invert(1);
}

/**
 * 2. Bag glyph on the Add to Bag button.
 *
 * The design places a small bag beside the label. Elementor's Product Add To Cart
 * widget has no icon control, so it is appended to the button.
 */
.sumaar-card-atc .cart .button::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-inline-start: 8px;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask: var(--sumaar-bag) center / contain no-repeat;
  mask: var(--sumaar-bag) center / contain no-repeat;
}

:root {
  --sumaar-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}