/* Shared control finish. The film, its controls and #atelier-story are excluded. */
:is(.gateway-page, .sector-page) .abika-ui-icon,
body.atelier :is(.atelier-header, .page-main, dialog, .home-consumption, .home-trade, .atelier-footer) .abika-ui-icon,
:is(#abika-consent-banner, #abika-consent-dialog) .abika-ui-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  vertical-align: middle;
  overflow: visible;
  pointer-events: none;
}

@media (max-width: 360px) {
  body.atelier .coffee-catalog .coffee-card-action { grid-template-columns: minmax(0,1fr); gap: 10px; }
  body.atelier .coffee-catalog .coffee-quantity { width: 144px; min-height: 44px; justify-self: start; }
  body.atelier .coffee-catalog .coffee-quantity input { flex: 1; }
  body.atelier .coffee-catalog .coffee-add-button { width: 100%; }
}

@media (max-width: 700px) {
  /* Filled actions keep their established forest, cream or champagne variant. */
  body.atelier .page-main .page-button,
  body.atelier .consumption-result .atelier-cta,
  body.atelier .home-trade .home-trade-request,
  body.atelier dialog .button,
  body.atelier .coffee-catalog .coffee-add-button,
  body.atelier .coffee-catalog .coffee-empty button,
  body.atelier .blend-request,
  body.atelier .blend-add button,
  .sector-page .sector-contacts .sector-request,
  :is(#abika-consent-banner, #abika-consent-dialog) .abika-consent-button {
    box-sizing: border-box;
    min-height: 48px;
    max-width: 100%;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    padding: 13px 17px;
    gap: 16px;
    font-family: Manrope, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
    white-space: normal;
    -webkit-appearance: none;
    appearance: none;
  }

  /* These already use flex; do not change the display of hidden controls. */
  body.atelier .coffee-catalog .coffee-add-button {
    padding-inline: 10px;
    gap: 8px;
    font-size: 12px;
  }
  body.atelier .coffee-catalog .coffee-add-button .abika-ui-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }
  :is(#abika-consent-banner, #abika-consent-dialog) .abika-consent-button {
    text-align: center;
    padding-inline: 12px;
  }

  /* Quiet actions share one baseline and an unboxed vector icon. */
  body.atelier .page-main .page-text-link,
  body.atelier dialog .text-link,
  body.atelier dialog .add-product,
  body.atelier .coffee-catalog .coffee-other-item button,
  body.atelier .coffee-catalog .coffee-heading a,
  body.atelier .blend-download,
  body.atelier .blend-total-line button,
  :is(.gateway-page, .sector-page) .header-contact,
  .sector-page .gateway-return,
  .sector-page .sector-contacts a[href^="tel:"] {
    min-height: 44px;
    max-width: 100%;
    gap: 16px;
    border-radius: 0;
    font-family: Manrope, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    white-space: normal;
  }
  body.atelier .blend-total-line button { font-size: 12px; }
  body.atelier .coffee-catalog .coffee-heading a { font-size: 12px; gap: 12px; }
  body.atelier .coffee-catalog .coffee-other-item button { font-size: 12px; }
  :is(.gateway-page, .sector-page) .header-contact { gap: 12px; }

  body.atelier .direct-contact-links a {
    min-height: 48px;
    gap: 16px;
    align-items: center;
  }
  body.atelier .direct-contact-links a[href^="mailto:"] { gap: 12px; }

  /* Existing icon wrappers remain so dynamic labels and aria names still work. */
  body.atelier :is(.page-main .page-button, .page-main .page-text-link, .consumption-result .atelier-cta, .home-trade-request, dialog .button, dialog .text-link, dialog .add-product, .coffee-add-button, .coffee-other-item button, .blend-request, .blend-download, .direct-contact-links a) > span:has(> .abika-ui-icon),
  :is(.gateway-page, .sector-page) :is(.header-contact, .gateway-return, .sector-contacts a) > span:has(> .abika-ui-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0;
    line-height: 1;
  }

  body.atelier dialog .close-button,
  dialog#abika-consent-dialog .abika-consent-close {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 8px;
  }
  body.atelier .private-label-upload input::file-selector-button {
    min-height: 44px;
    border-radius: 6px;
    padding: 10px 14px;
    font-weight: 500;
  }

  body.atelier :is(.page-main .page-button, .page-main .page-text-link, .consumption-result .atelier-cta, .home-trade-request, dialog .button, dialog .text-link, .coffee-add-button, .coffee-other-item button, .blend-request, .blend-download, .blend-add button):focus-visible,
  :is(.gateway-page, .sector-page) :is(.header-contact, .gateway-return, .sector-contacts a):focus-visible,
  :is(#abika-consent-banner, #abika-consent-dialog) .abika-consent-button:focus-visible {
    outline: 2px solid #657e6b;
    outline-offset: 4px;
  }
}