/* Shared, restrained depth for the public shops and their managers. */
:root {
  --surface-shadow: 0 1px 3px rgb(24 32 26 / 6%), 0 5px 14px rgb(24 32 26 / 2.5%);
  --surface-shadow-hover: 0 2px 4px rgb(24 32 26 / 8%), 0 6px 16px rgb(24 32 26 / 4%);
  --control-shadow: 0 1px 2px rgb(24 32 26 / 9%), 0 2px 5px rgb(24 32 26 / 3.5%);
  --control-shadow-hover: 0 2px 3px rgb(24 32 26 / 10%), 0 3px 7px rgb(24 32 26 / 5%);
}

/* Catalogue tiles use the image panel as their surface, with captions below. */
:where(.brand-category, .card-image, .support-card, .range-picture, .main-image,
       .cart-line > a, .order-summary, .customer-contents, .cancellation-form,
       .unavailable, .checkout-status, .panel, .login-card, .stats,
       .table-wrap, .image-grid article, .reference-details) {
  box-shadow: var(--surface-shadow);
}

:where(a.brand-category, a.card-image, a.support-card, a.range-picture, .cart-line > a,
       button, .button, input[type="button"], input[type="submit"], input[type="reset"],
       [role="button"], .category-links a) {
  transition: box-shadow 160ms ease;
}

:where(button, .button, input[type="button"], input[type="submit"], input[type="reset"],
       [role="button"], .category-links a) {
  box-shadow: var(--control-shadow);
}

/* A table already enclosed in a panel shares that panel's outer edge. */
.panel .table-wrap {
  box-shadow: none;
}

@media (hover: hover) {
  :where(a.brand-category, a.card-image, a.support-card, a.range-picture, .cart-line > a):hover {
    box-shadow: var(--surface-shadow-hover);
  }
  :where(button, .button, input[type="button"], input[type="submit"], input[type="reset"],
         [role="button"], .category-links a):hover {
    box-shadow: var(--control-shadow-hover);
  }
}

/* Native disabled state includes controls disabled by a containing fieldset. */
:where(button, .button, input[type="button"], input[type="submit"], input[type="reset"],
       [role="button"]):is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  :where(a.brand-category, a.card-image, a.support-card, a.range-picture, .cart-line > a,
         button, .button, input[type="button"], input[type="submit"], input[type="reset"],
         [role="button"], .category-links a) {
    transition: none;
  }
}

@media print {
  :root {
    --surface-shadow: none;
    --surface-shadow-hover: none;
    --control-shadow: none;
    --control-shadow-hover: none;
  }
}