/* =========================================================
   Corners, borders, shadows, image ratios
   ========================================================= */
:root {
  /* Radius is zero. Everywhere. The only circles in the system
     are carousel nav buttons and avatars, which are true 50%. */
  --radius: 0;
  --radius-circle: 50%;

  --border-width: 1px;
  --border-width-button: 1.5px;
  --border-width-tab: 2px;

  --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.08);
  --shadow-nav: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-dropdown: 0 12px 32px rgba(0, 0, 0, 0.08);
  /* never a shadow on a button */

  /* image aspect ratios */
  --ratio-square: 1 / 1; /* @kind other */
  --ratio-bestseller: 1 / 1.12; /* @kind other */
  --ratio-category: 3 / 3.75; /* @kind other */
  --ratio-feature: 4 / 5; /* @kind other */
  --ratio-tile: 5 / 6; /* @kind other */
  --ratio-brand: 16 / 10; /* @kind other */

  /* banner heights */
  --h-hero: 664px;
  --h-banner: 440px;
  --h-banner-tall: 520px;
  --h-quote: 460px;
  --h-hero-mobile: 460px;
  --h-banner-mobile: 380px;
}